Vue-Treeselect 树形下拉框的使用及常见问题记录

如果你想实现一个下拉树的组件,可以直接使用 element plus 中的 treeSelect 组件,但是如果你的项目正在用的是 element 2.X 版本,那么它是不包含 treeSelect 组件的,但是我们还是可以基于一些第三方的插件 比如:@riophae/vue-treeselect 插件。

使用方法

1 安装

复制代码
npm i @riophae/vue-treeselect
// 或
yarn add @riophae/vue-treeselect

2 引入

为方便使用,我们可以在全局引入。在 main.js 全局引入,并注册全局组件。

复制代码
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
Vue.component('treeselect', Treeselect)

3 使用示例

复制代码
<template>
  <div class="box">
    <treeselect v-model="selectedItems" placeholder="请选择" :options="treeData"></treeselect>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: null,
      treeData: [
        {
          id: 1,
          label: "水果",
          children: [
            { id: 2, label: "西瓜" },
            { id: 3, label: "香蕉" },
            { id: 4, label: "橙子" },
          ],
        },
        {
          id: 5,
          label: "蔬菜",
          children: [
            { id: 6, label: "西红柿" },
            { id: 7, label: "黄瓜" },
            { id: 8, label: "青菜" },
          ],
        },
        {
          id: 9,
          label: "零食",
          children: [
            { id: 10, label: "薯片" },
            { id: 11, label: "巧克力" },
          ],
        },
      ],
    };
  },
};
</script>

常见问题

(1)占位符 unknown,或其他异常报错。

解决方法:

v-model 不能写成空字符串或者空数组,否则会出现 unknown,可以默认是 null。

(2)数据提示英文

解决方法

使用 noChildrenText、noOptionsText 和 noResultsText 自定义文本的属性。

  • noChildrenText:用于定义当某个选项没有子选项时的文本提示。例如,当一个分类没有子分类时,可以使用 noChildrenText 来显示相应的提示文本。

  • noOptionsText:用于定义当没有可选项时的文本提示。例如,当数据为空或没有匹配的选项时,可以使用 noOptionsText 来显示相应的提示文本。

  • noResultsText:用于定义当搜索结果为空时的文本提示。例如,当用户进行搜索但没有匹配的结果时,可以使用 noResultsText 来显示相应的提示文本。

    <treeselect v-model="selectedItems" :options="treeData" noChildrenText="没有子选项" noOptionsText="没有可选项" noResultsText="没有匹配的结果"></treeselect>

(3)数据结构不符合

很多时候后台返回回来的数据结构的字段并不是 id、label、children 这些,这个时候就需要我们将其换成符合要求的数据结构。

这时候我们可以使用 normalizer 属性,它用于规范化选项数据。通过 normalizer 属性,你可以自定义选项数据的结构,以适应插件的要求。

(4)获取选中节点对象而不是单一的值

valueFormat 属性能够决定 value 属性的格式。

  • 当设置为 id 时,value 属性的格式就是 id 或 id 数组。
  • 当设置为 object 时,value 属性的格式就是 node 或 node 数组。
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python