el-select + el-tree结合下拉框树

|

el-select + el-tree结合下拉框树

话不多说先上代码
使用el的下拉框和树的代码

<el-select v-model="mineStatus" placeholder="请选择" multiple clearable @clear="clearable" collapse-tags @visible-change="selectcar" @remove-tag="remove">
  <el-option :value="mineStatusValue" style="height: auto">
    <el-tree :data="trees" :default-expanded-keys="['总分组']" show-checkbox node-key="name" ref="tree"highlight-current :props="defaultProps" @check="handleCheckChange"></el-tree>
  </el-option>
</el-select>

定义树，下拉框显示的值

 data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        id: "id"
      },
      mineStatus: [],
      mineStatusValue: [],
      trees: [],
   }

 methods: {
 //当复选框勾选中时，给下拉框赋值并且给查询条件赋值
handleCheckChange() {
      let res = this.$refs.tree.getCheckedNodes();
      let arrLabel = [];
      let arr = [];
      res.forEach(item => {
        arrLabel.push(item.name);
        arr.push(item);
      });
      this.mineStatusValue = arr;
      this.mineStatus = arrLabel;
      for (let i in arr) {
        this.paginations.groupIds.push(arr[i].id);
      }
    },
    //当多选时候，删除小标签时，将删除的子节点状态改为未勾选，重新查找车辆
    remove(val) {
      this.paginations.groupIds = [];
      this.$refs.tree.setChecked(val, false);
      let arr = this.$refs.tree.getCheckedNodes();
      for (let i in arr) {
        this.paginations.groupIds.push(arr[i].id);
      }
      this.postcar(this.paginations.groupIds);
    },
    //清除所有选项
    clearable() {
      this.paginations.groupIds = [];
      this.cars = [];
      this.$refs.tree.setCheckedKeys([]);
    },
    //下拉框退回时查找车辆
    selectcar(val) {
      if (val === false) {
        this.postcar(this.paginations.groupIds);
      }
    },
    // 根据分组查车辆
    postcar(ids) {
      if (ids.length !== 0) {
        remoteUpgrades._postcar(ids).then(
          res => {
            this.cars = res.data;
          },
          err => {
            console.log(err);
          }
        );
      } else {
        this.cars = [];
      }
    },
  }

最后效果展示

第一次写博客，有什么不对地方，需要改进的地方欢迎指出