elementUI 下拉树
一、实现点
1、下拉框与树形控件的组合。
2、选中项以tag标签形式展示。
3、树以复选框选中取消为有效操作。
4、删除tag标签同步取消树对应数据的选择。
5、dataTreeList为树的测试数据，数据格式。
6、initValue展示下拉选择文本。optionValue为下拉选择key值。selectdArray为树选中标识。resultArray存放选中的对象。
7、deleteCharacter是对普通数组删除元素的方法。
8、chooseValue是对象数组删除指定对象的方法，其中type区分返回值类型。
二、代码
<template>
<div class="select-trees">
<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"
>
<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="false"
:default-checked-keys="selectdArray"
@check-change="handleCheckChange"
/>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: '',
data() {
return{
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: [] }
]
}
},
watch: {
},
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;
}
}
}
</script>
<style lang="less" scoped>
/deep/.el-select .el-input{
width: 200px;
}
</style>
