1. HTML part
<el-popover
placement="bottom"
title="特征选择"
width="620"
trigger="click"
>
<el-tree
ref="tree"
:data="datasetFilterList" //绑定数据
show-checkbox
node-key="id"
:default-checked-keys="datasetFilterListChecked" //监听事件中即checked中会获得一个keys的数组
highlight-current
@check="
(click, checked) => {
handleCheckChange(click, checked); //监听选择框的内容变化
}
"
:props="defaultProps"
/>
<el-button slot="reference" type="primary" style="margin-right: 25px"
>显示特征选择</el-button
>
</el-popover>
2. Related data
datasetFilterListChecked: [], //被选择的内容的id集合
datasetFilterList: [], 选择框渲染的数据
defaultProps: {
children: "modelColumnsetVOList", //孩子
label: "datasetName", //展示出来的标题
},
3. Method
//特征选择监听事件
handleCheckChange(click, checked) {
this.arr = [];
checked.checkedKeys.forEach((e) => {
if (e) {
this.arr.push(e); //把选择的key数组赋值给arr
}
});
if(this.arr.length == 0){
this.$message({
type:'warning',
message:'请至少选择一列数据'
})
return
}
this.getList(); //把arr拿去调接口
},
Effect: