vue 下拉选择树 vue-treeselect

vue 下拉选择树 vue-treeselect

• 安装

npm i @riophae/vue-treeselect --save

• 引入

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

• js

export default {
  components: { Treeselect },
  data() {
    return {
      deptOptions: [{
        "deptId": 100,
        "parentId": 0,
        "deptName": "公司名",
        "children": [
            {
                "deptId": 101,
                "parentId": 100,
                "deptName": "深圳总公司",
                "children": [
                    {
                        "deptId": 103,
                        "parentId": 101,
                        "deptName": "研发部门"
                    },
                    {
                        "deptId": 104,
                        "parentId": 101,
                        "deptName": "市场部门"
                    },
                ]
            },
            {
                "deptId": 102,
                "parentId": 100,
                "deptName": "长沙分公司",
                "children": [
                    {
                        "deptId": 108,
                        "parentId": 102,
                        "deptName": "市场部门"
                    },
                ]
            }
        ]
    }
],
    };
  },

  methods: {
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children
      };
    },
  }
};

• html

<el-form-item label="上级部门" prop="parentId">
   <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
el-form-item>