vue-treeselect安装和操作

原创
小哥 3年前 (2022-11-10) 阅读数 48 #大杂烩

参考地址: https://www.vue-treeselect.cn/

1,建议npm安装vue-treeselect,并使用webpack以此类推来构建应用程序。

npm install --save @riophae/vue-treeselect

2这个例子展示了如何。vue-treeselect与Vue SFCs集成在一起。




3、实例



import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: { TreeSelect },
    data() {
      return {
        normalizer(node) {
        if (node.child == null || node.child == "null") {
          delete node.child;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.child,
        };
      },
      sortValueBy: "ORDER_SELECTED",
      treeData: [{
            "id": "10363019578370",
            "name": "中国集团有限公司",
            "child": [{
                "id": "1353931643010",
                "name": "研究所",
                "child": [{
                    "id": "13646729090",
                    "name": "有限公司。",
                    "child": [{
                        "id": "13695725506",

                        "name": "四级单位",
                        "child": null
                    }, {
                        "id": "1369667522",
                        "name": "第二个四级单元",
                        "child": null
                    }]
                }, {
                    "id": "1368708652545",
                    "name": "分公司",
                    "child": null
                }]
            }, {
                "id": "135398871778",
                "name": "有限公司",
                "child": null
            }, {
                "id": "135399959042",
                "name": "一级公司",
                "child": [{
                    "id": "1353011516161",
                    "name": "二级公司",
                    "child": [{
                        "id": "13332487041",
                        "name": "四级",
                        "child": [{
                            "id": "137745549121",
                            "name": "五级",
                            "child": null
                        }]
                    }]
                }]
            }, ]
        }, ]

      }

    },
  }

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门