vue elementui 中——el-popover、el-tree 树选择框的使用

一、html部分

 <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>

二、相关data

 datasetFilterListChecked: [],  //被选择的内容的id集合
      datasetFilterList: [], 选择框渲染的数据
      defaultProps: {
        children: "modelColumnsetVOList", //孩子
        label: "datasetName",  //展示出来的标题
      },

三、方法

 //特征选择监听事件
    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拿去调接口
    },

效果：