我了解到在 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;
}
}
})
标签：name,下拉树,list,id,item,ui,element,data,children From： https://www.cnblogs.com/wwssgg/p/17675366.html