在vue中使用vue-treeselect树状结构

最新推荐文章于 2025-03-14 17:23:33 发布

原创最新推荐文章于 2025-03-14 17:23:33 发布

· 1.7k 阅读

1 ·

版权

文章标签：

#vue.js #javascript #npm

一般来说，组件都会自带TreeSelect 树型选择控件
但是自带的组件样式可能不是我们要的，比如antdv的控件长这样

但我们更想要这样,后面有数量

首先npm下载或者cnpm下载

cnpm i @riophae/vue-treeselect --save

然后在组件中引入

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: { Treeselect },
}

最后在组件中使用

<treeselect
                  v-model="form.parentId"
                  :options="menuOptions"
                  :normalizer="normalizer"
                  :show-count="true"
                  placeholder="选择上级菜单"
                />

export default {
data() {
    return {
      // 菜单树选项
      menuOptions: [],
    };
  },
  methods: {
  /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menuName,
        children: node.children,
      };
    },
  }
}