526互联

element-ui 的下拉树

发布时间 2023-09-03 19:00:46作者: 信铁寒胜

我了解到在 element-ui 中并没有下拉树这个组件，所以只能用<el-select> 组件和<el-tree> 结合来实现

1、html

<script src="../resources/js/vue.js"></script>
<script src="../resources/js/element-ui/index.js"></script>
<link href="../resources/css/element-ui/index.css" rel="stylesheet">

<body>
  <div class="select-trees" id="selectTree">
    <el-select v-model="initValue" filterable multiple :clearable="false" :collapse-tags="false" :placeholder="'请选择'+placeholderRemark" class="select-number select-border" 
        popper-class="selectClass" :popper-append-to-body="false" @remove-tag="handlerRemoveTag" @change="changeOption" style="width: 200px">
    <el-option :value="optionValue" style="height: auto">
      <el-tree show-checkbox ref="tree" node-key="id" empty-text="暂无数据" :data="dataTreeList" :props="propsData" :check-on-click-node="false" 
        :expand-on-click-node="true" :default-checked-keys="selectdArray" @check-change="handleCheckChange"/>
      </el-option>
    </el-select>
</div>
</body>
<script src="../js/selectTree.js" type="module"></script>

2、JS

new Vue({
    el:"#selectTree",
    data:{
        initValue: [],
        optionValue: [],
        placeholderRemark: '',
        selectdArray: [],
        resultArray: [],
        deleteFlag: '',
        propsData: {
            id: 'id',
            label: 'name',
            children: 'children'
        },
        dataTreeList: [
            { id: '01', name: '水果', children: [
                { id: '0101', name: '苹果', children: [
                    { id: '010101', name: '红苹果', children: [] },
                    { id: '010102', name: '青苹果', children: [] },
                    { id: '010103', name: '黄苹果', children: [] }
                ] },
                { id: '0102', name: '香蕉', children: [] },
                { id: '0103', name: '橙子', children: [] }
            ] },
            { id: '02', name: '动物', children: [] },
            { id: '03', name: '蔬菜', children: [] }
        ]
    },
    methods: {
        changeOption(item) {
            console.log('select======', this.initValue,this.optionValue);
        },
        handlerRemoveTag(item) {
            // 删除选中的tag
            let removeValue = this.chooseValue(this.resultArray, 'name', item, 0);
            this.deleteCharacter(this.optionValue, removeValue.id);
            this.deleteCharacter(this.selectdArray, removeValue.id);
            // 同步更新下拉内容
            this.$refs.tree.setChecked(removeValue.id, false, true);
        },
        handleCheckChange(data, checked, indeterminate) {
            // 下拉树的复选框操作
            if (checked) {
                this.initValue.push(data.name);
                this.optionValue.push(data.id);
                this.selectdArray.push(data.id);
                this.resultArray.push({id: data.id, name: data.name});
            } else {
                this.deleteCharacter(this.initValue, data.name);
                this.deleteCharacter(this.optionValue, data.id);
                this.deleteCharacter(this.selectdArray, data.id);
                this.chooseValue(this.resultArray, 'id', data.id, 1);
            }
        },
        deleteCharacter(list, str) {
            let index = list.indexOf(str);
            if (index > -1) {
                list.splice(index, 1);
            }
            return list
        },
        chooseValue(list, key, str, type) {
            let result = null;
            list.forEach((item, index)=> {
                if (item[key] === str) {
                    result = item;
                    list.splice(index, 1);
                }
            });
            return type ? list : result;
        }
    }
})