基于element ui 改造的下拉树形选择器

image.png

使用组件页面

import SelectTree from "./components/treeSelect";


export default {
  components: {
    SelectTree
  },
  data() {
    return {
      privilegeList: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 可收起（可选）
      valueId: "",
      props: {
        // 配置项（必选）
        value: "id",
        label: "name",
        children: "children"
        // disabled:true
      }
    };
  },
computed: {
    /* 转树形数据 */
    optionData() {
    //这里如果是后台返回的树形结构可直接引用 不用转换
      let cloneData = JSON.parse(JSON.stringify(this.privilegeList)); // 对源数据深度克隆
      return cloneData.filter(father => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
        return father.parentId == 0; //返回第一层
      });
      return cloneData;
    }
  },
  methods: {
    getValue(value) {
      console.log(value);
    }
  }
};

下面是组件 可以直接用