el-tree结合el-select的使用方法

808 阅读1分钟
<template>
  <div class="Wrapper">
    <div class="equipmentWra">
      <div class="equipment">
        <div class="font">设备选择</div>
        <!-- 多选 -->
        <el-select size="small" v-model="form.treeData" multiple  placeholder="请选择" style="width: 250px">
          <el-option :value="treeDataValue" style="height: auto;font-weight: 400">
            <el-tree
              ref="tree"
              :data="devTrees"
              show-checkbox
              default-expand-all
              node-key="id"
              :props="defaultProps"
              @check-change="handleNodeClick"
            />
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
    data() {
      return {
        loading: false,
        form: {
          treeData: [], // 多选
        },
        treeDataValue: "",
        devTrees: [],
        defaultProps: {
          children: "children",
          label: "label",
        }
      }
    },
   
    mounted() {

    },
    methods: {
      // 点击树节点
      handleNodeClick(data, node, nodeData){
        // select 单选
        // this.treeDataValue = data
        // this.form.treeData = data.name
        // select 多选(判重后添加到选择结果数组中)
        this.treeDataValue = data
        let num = 0;
        this.form.treeData.forEach(item => {
          item === data.label ? num++ : num;
        });
        if(num === 0) {
            this.form.treeData.push(data.label)
        }
      },
      
      //设备树查询
      devTree() {
        devRunAnalysis.devTree().then(res => {
          // console.log(res)
          this.devTrees = res.data;
        });
      }
    }
  };
</script>
<style scoped lang="scss">
  .Wrapper {
    background: white;
    padding: 20px 50px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .equipmentWra {
    display: flex;

    .equipment {
      display: flex;
      margin-right: 20px;

      .font {
        line-height: 40px;
        font-weight: bold;
        margin-right: 20px;
      }
    }
  }
</style>