实现单选有两种方法
方法一
html片段
<el-select v-model="treeData" placeholder="请选择..." style="width: 16rem">
<el-option :value="treeDataValue" style="height: auto">
<el-tree
ref="tree"
:data="data"
default-expand-all
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</el-option>
</el-select>
js代码
<script>
export default {
data() {
return {
treeData: "",
treeDataValue: "",
data: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
},
],
},
{
id: 2,
name: "一级 2",
children: [
{
id: 5,
name: "二级 2-1",
},
{
id: 6,
name: "二级 2-2",
},
],
},
{
id: 3,
name: "一级 3",
children: [
{
id: 7,
name: "二级 3-1",
},
{
id: 8,
name: "二级 3-2",
},
],
},
],
defaultProps: {
children: "children",
label: "name",
},
};
},
methods: { handNodeClick(data,node,nodeData){
this.treeDataValue= data
this.treeData= data.name
}},
};
</script>>
这里treeDataValue 为当前节点数据;treeData相当于label,就是想要显示的值,注意设置node-key。
方法二使用label和value赋值
html代码
<el-select v-model="treeData" placeholder="请选择..." style="width: 16rem">
<el-option :value="treeDataValue" style="height: auto" :label="treeData">
<el-tree
ref="tree"
:data="data"
default-expand-all
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
/>
</el-option>
</el-select>
js代码
export default {
data() {
return {
treeData: "",
treeDataValue: "",
data: [
{
id: 1,
name: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
},
],
},
{
id: 2,
name: "一级 2",
children: [
{
id: 5,
name: "二级 2-1",
},
{
id: 6,
name: "二级 2-2",
},
],
},
{
id: 3,
name: "一级 3",
children: [
{
id: 7,
name: "二级 3-1",
},
{
id: 8,
name: "二级 3-2",
},
],
},
],
defaultProps: {
children: "children",
label: "name",
},
};
},
methods: {
handNodeClick(data){
this.treeDataValue= data.id
this.treeData= data.name
}
}
};
实现多选
html片段
<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange">
<el-option :value="mineStatusValue" style="height: auto">//option展开高度太小,把height设置为auto就好啦
<el-tree :data="data" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
</el-option>
</el-select>
js片段
<script>
export default {
data() {
return {
mineStatus: "",
mineStatusValue: [],
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1"
}
]
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1"
},
{
id: 6,
label: "二级 2-2"
}
]
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1"
},
{
id: 8,
label: "二级 3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label"
}
};
},
methods: {
//select框值改变时候触发的事件
selectChange(e){
var arrNew = [];
var dataLength = this.mineStatusValue.length;
var eleng = e.length;
for(let i = 0; i< dataLength ;i++){
for(let j = 0; j < eleng; j++){
if(e[j] === this.mineStatusValue[i].label){
arrNew.push(this.mineStatusValue[i])
}
}
}
this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
},
handleCheckChange() {
let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true,1. 是否只是叶子节点 2. 是否包含半选节点(就是使得选择的时候不包含父节点)
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.label);
arr.push(item);
});
this.mineStatusValue = arr;
this.mineStatus = arrLabel;
console.log('arr:'+JSON.stringify(arr))
console.log('arrLabel:'+arrLabel)
}
}
};
</script>>