Tree-select-ljy NPM

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