clsd/admin-ui/src/components/dtree.vue

<template>
  <div>
    <!-- <div class="head-container" style="margin-top: -7px"><el-input v-model="deptName" placeholder="请输入部门名称" clearable prefix-icon="el-icon-search" style="margin-bottom: 10px" /></div>
    <div class="head-container" style="height: calc(100vh - 203px); overflow-y: auto">
      <el-tree :data="deptOptions" :props="defaultProps" :current-node-key="value" :expand-on-click-node="false" :default-expanded-keys="idArr" :filter-node-method="filterNode" ref="tree" node-key="id" highlight-current @node-click="handleNodeClick" />
    </div> -->
    <el-cascader ref="cascader" v-model="value" :options="deptOptions" :props="{ value: 'id', label: 'label', checkStrictly: true }" :show-all-levels="false" @change="handleChange"></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'dtree',
  props: {
    value: {
      type: Number
    },
    dataTypeSelect: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: true,
      deptName: undefined,
      deptOptions: [],
      idArr: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    //部门列表
    this.ajax({ url: '/system/user/deptTree' }).then((response) => {
      this.deptOptions = response.data;
    });
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit('input', data.id);
      this.$emit('handleQuery');
    },
    //选择
    handleChange(value) {
      if (value.length > 0) {
        this.$refs.cascader.dropDownVisible = false
        this.$emit('input', value[value.length - 1]);
        this.$emit('handleQuery');
      }
    }
  }
};
</script>