tree-select-ljy Vue树形组件

安装组件

npm install tree-select-ljy

引用组件

import TreeSelectLjy from "tree-select-ljy";
import "tree-select-ljy/lib/tree-select-ljy.css";
Vue.use(TreeSelectLjy);

组件使用

<tree-select
  ref="treeSelect"
  labelKey="label"
  idKey="id"
  pidKey="pid"
  :isLink="true"
  @change="change">
</tree-select>

数据Demo

const treeList = [
  {
    label: "部门1",
    pid: 0,
    id: 1,
    isCanCheck: true,
    children: [
      {
        label: "部门1-1",
        pid: 1,
        id: 2,
        isCanCheck: true,
        children: [
          {
            label: "部门1-1-1",
            pid: 2,
            id: 11,
            isCanCheck: true,
          },
          {
            label: "部门1-1-2",
            pid: 2,
            id: 12,
            isCanCheck: true,
          },
          {
            label: "部门1-1-3",
            pid: 2,
            id: 13,
            isCanCheck: true,
          },
        ]
      },
      {
        label: "部门1-2",
        pid: 1,
        id: 3,
        isCanCheck: true,
      },
      {
        label: "部门1-3",
        pid: 1,
        id: 4,
        isCanCheck: true,
      },
      {
        label: "部门1-4",
        pid: 1,
        id: 5,
        isCanCheck: true,
      }
    ]
  },
  {
    label: "部门2",
    pid: 0,
    id: 6,
    isCanCheck: true,
    children: [
      {
        label: "部门2-1",
        pid: 6,
        id: 7,
        isCanCheck: true,
      },
      {
        label: "部门2-2",
        pid: 6,
        id: 8,
        isCanCheck: true,
      },
      {
        label: "部门2-3",
        pid: 6,
        id: 9,
        isCanCheck: true,
      },
      {
        label: "部门2-4",
        pid: 6,
        id: 10,
        isCanCheck: true,
      }
    ]
  }
]

组件调用

this.$refs.treeSelect.init(treeList);

Props

|属性|说明|类型|默认值| |:-:|:-:|:-:|:-:| | labelKey | 显示文本对应的key值 | String | label | | idKey | 逻辑判断id key值，与pid有父子关联关系 | String | id | | pidKey | 逻辑判断pid（父级id）key值，与id有父子关联关系 | String | pid | | isLink | 是否在点击父级时勾选子级 | Boolean | false |

Events

|属性|说明|返回值| |:-:|:-:|:-:| | change | 勾选状态改变时触发，返回选中数据列表 | selectList |

Methods

|属性|说明|参数值| |:-:|:-:|:-:| | init | 初始化列表 | 有树形关系的树形数据，树形关系根据chidren、id、pid决定 |