cobona-xy-tree-checkbox

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

效果：运行后可以看到了。

参考链接：https://github.com/Summer-Lin/vue-tree/tree/vue-tree-demo

代码： 全局引用 import treeNode from 'cobona-tree-checkbox-cross'; Vue.use(treeNode);

<template>
  <div>
    <tree-node
      :treeData="treeData"
      v-model="ids"
      :withoutParents="withoutParents"
      :options="treeOptions"
    ></tree-node>
    <div>ids--(包含父节点): {{ ids }}</div>
    <div>withoutParents--(不包含父节点): {{ withoutParents }}</div>
  </div>
</template>
<script>
// 局部引用
import treeNode from 'cobona-tree-checkbox-cross'
export default {
  components: { TreeNode },
  data() {
    return {
      //包含父节点,必填项
      ids: [],
      //不包含父节点，非必填项，当treeOptions对象中的withParents为false必须填,
      //而且初始数值跟ids一样
      withoutParents: [],
      //treeOptions非必填项
      treeOptions: {
        //是否包含父节点，如果为false,则要添加withoutParents这个参数，如果为true则不需要添加
        withParents: false
      },
      //   数据结构在上面
      treeData: [{
        "id": 1,
        "name": "一级",
        "child": [
          {
            "id": 11,
            "name": "一级1",
            "child": []
          },
          {
            "id": 12,
            "name": "一级2",
            "child": [{
              "id": 121,
              "name": "一级2-1",
              "child": []
            }]
          }
        ]
      }, {
        "id": 2,
        "name": "二级",
        "child": [
          {
            "id": 21,
            "name": "二级1",
            "child": []
          },
        ]
      }]
    }
  }
}
</script>