vue+element下拉树选择器 - Go语言中文社区

vue+element下拉树选择器


项目需求:输入框点击弹出树形下拉结构,可多选或者单选。
解决方案:1.使用layui formSelect多选插件
2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构

<el-form-item label="下拉树选择器">
      <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
          <el-option :value="mineStatus" style="height: auto">
              <el-tree :data="treedata" default-expand-all show-checkbox check-strictly node-key="id"
                 ref="tree" highlight-current :props="defaultProps"
                 @check-change="handleCheckChange"></el-tree>
               </el-option>
           </el-select>
</el-form-item>
    data: function () {
        return {
            mineStatus: "",
            treedata: [],
            defaultProps: {
                children: "children",
                label: "name"
            },
        }
    },


 handleCheckChange(data, checked, node) {
            let res = this.$refs.tree.getCheckedNodes(false, true); //true,1. 是否只是叶子节点 2.选择的时候不包含父节点)
            if (checked) {
                this.$refs.tree.setCheckedNodes([data]);
            }
            let arrLabel = [];
            // console.log(res, 'res')
            res.forEach(item => {
                if (arrLabel.length === 0) {
                    arrLabel.push(item.name);
                } else {
                    arrLabel.length === 0;
                }
            });
            this.mineStatus = arrLabel;
            // console.log(arrLabel, 'arrLabel')
        },
版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/FormerWhite/p/11719665.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-11-17 12:44:49
  • 阅读 ( 3242 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢