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')
        },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM