Vue-jtree NPM | npm.io

`|` VUE 树形控件

version： 1.0.0

author： SoldierAb

用清晰的层级结构展示信息，可下拉选择、展开或折叠，提供单选多选功能

安装

npm i vue-jtree

使用

<template>
  <div>
   <tree
      only-leaf
      show-checkbox
      type="tree"
      v-model="selectValue"
      :label-key="labelKey"
      :value-key="valueKey"
      :data-source="list"
      @on-toggle-expand="toggleExpand"
      @on-select-change="selectChange"
      @on-check-change="checkChange"
    ></tree>
  </div>
</template>

<script>
import Tree from "vue-jtree";

// Vue.use(Tree)   全局注册

export default {
  components: {Tree},
  data() {
    return {
        list: [
        {
          name: "霍山县",
          pId: "341500000000000",
          open: "False",
          id: "341525000000000",
          children: [
            {
              name: "衡山镇",
              pId: "341525000000000",
              open: "False",
              id: "341525100000000"
            },
            {
              name: "与儿街镇",
              pId: "341525000000000",
              open: "False",
              id: "341525104000000"
            },
            {
              name: "黑石渡镇",
              pId: "341525000000000",
              open: "False",
              id: "341525105000000"
            },
            {
              name: "诸佛庵镇",
              pId: "341525000000000",
              open: "False",
              id: "341525106000000"
            },
            {
              name: "高桥湾现代产业园",
              pId: "341525000000000",
              open: "False",
              id: "341525401000000"
            }
          ]
        }
      ],
      showCheckBox: false,
      type:'select',
      labelKey: "name",
      valueKey: "id",
      childrenKey:'children',
      selectValue:'',
    };
  },
  created() {
    this.selectValue = "350602";
  },
  watch:{
      selectValue(){
          console.log('selectValue',this.selectValue);
      },
  },
  
  methods: {
    toggleExpand(node){
      console.log('toggleExpand',node);
    },
    selectChange(node){
      console.log('selectChange',node);
    },
    checkChange(nodes){
      console.log('checkChange',nodes);
    },
  }
};
</script>

`|` Attributes

属性	说明	类型	可选值	默认值
dataSource	数据源	Array	-	-	是
type	组件类型	String	tree、select	select	-
value	双向数据绑定 v-model , `props需传入valueKey,且类型必须与valueKey对应的值一致`	-	-	-
only-leaf	只取叶子节点数据	-	-	-
multiple	单击多选	-	-	-	-
showCheckbox	开启复选框	-	-	-	-
props	配置选项具体看下表	-	-	-

`|` Props

参数	说明	类型	可选值	默认值	是否必须
labelKey	数据显示key	String	-	-	是
valueKey	取值key (不传默认传递节点完整数据)	String	-	-	-
childrenKey	子集key	String	-	children	-

`|` Events

方法名	说明	参数
on-toggle-expand	节点被点击展开收缩的时触发	传递 `dataSource` 属性的数组中该节点所对应的对象（对象中`expand`属性即当前展开状态）
on-select-change	props传递`showCheckbox`属性值为`false`，节点被点选的时触发	传递 `dataSource` 属性的数组中所选中的对象（props有传递valueKey则传递逗号拼接的字符串）
on-check-change	props传递`showCheckbox`属性值为`true`，节点checkbox被点击的时触发	传递 `dataSource` 属性的数组中所选中对应的对象（props有传递valueKey则传递逗号拼接的字符串）