搜索条件下拉展示树状结构

<template>
  <el-form-item label="选择公司" prop="departIds">
    <el-select
      v-model="selectedDepartIds"
      placeholder="请选择公司及部门"
      clearable
      multiple
      size="small"
      @focus="dialogVisible = true"
    >
      <el-option
        v-for="item in selectedOptions"
        :key="item.id"
        :label="item.label"
        :value="item.id"
      ></el-option>
    </el-select>

    <el-dialog
      title="选择公司及部门"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-tree
        :data="treeData"
        ref="tree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
        @check-change="handleTreeCheckChange"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确定</el-button>
      </span>
    </el-dialog>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      selectedDepartIds: [],
      selectedOptions: [],
      dialogVisible: false,
      treeData: [
        // 树形数据示例
        {
          id: 1,
          label: '公司A',
          children: [
            { id: 2, label: '部门A1' },
            { id: 3, label: '部门A2' },
          ],
        },
        {
          id: 4,
          label: '公司B',
          children: [
            { id: 5, label: '部门B1' },
            { id: 6, label: '部门B2' },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      expandedKeys: [],
    };
  },
  methods: {
    handleTreeCheckChange() {
       // 可以根据需要处理树形结构的选中变化
      const that = this
      // 置空
      this.queryParams.departIds = []
      const nodes = this.$refs.tree.getCheckedNodes()
      nodes.forEach(function (item) {
        that.queryParams.departIds.push(item.id)
      })
    },
    confirmSelection() {
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      this.selectedOptions = checkedNodes;
      this.selectedDepartIds = checkedNodes.map(node => node.id);
      this.dialogVisible = false;
    },
  },
};
</script>