基于 iView 的树选择器组件

最新推荐文章于 2024-10-18 11:35:16 发布

转载最新推荐文章于 2024-10-18 11:35:16 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5aec0d59f265da0b9f4025a6

文章标签：

#ui

本文介绍了一款基于iView的TreeSelect组件，用于实现复杂的产品需求。此组件支持搜索和清空选项，并提供了详细的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

产品最近提了一个需要三级选择器才能实现的需求，看了iView和Element-UI，没有找到合适的组件，然后做了一个基于iView的TreeSelect 组件。

github地址：github.com/FFFFF1/vue-…

install 安装

npm install vue-super-tree-select --save复制代码

Usage 示例

该组件是基于iView的，请事先use iView 与其CSS；

如果出现下拉框被其他组件遮盖时，请自行修改.content-box 的z-index值(默认为100)；

<template>
  <super-tree-select v-model='model_' :data='data_' :searchable='true' width="500"></super-tree-select>
</template>

<script>
import superTreeSelect from 'vue-super-tree-select'

export default {
  components: {superTreeSelect},
  data () {
    return {
      model_: [
      { title: '豆浆' },
      { title: '油条' }
      ],
      data_: [
        {
          title: '早餐',
          children: [
            {
              title: '北方',
              children: [
                {title: '豆浆'},
                {title: '油条'}
              ]
            },
            {
              title: '南方',
              children: [
                {title: '肠粉'},
                {title: '虾饺'}
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>复制代码

config 配置项

属性	说明	类型	默认值
pkey	设置每一个节点的唯一标识	String	title
v-model	存放组件中选择的最底层节点信息,每个节点信息会自动加上一个value属性，记录其所有父节点的pkey值类似于:'id1/id2/id3'	Array	/
data	组件中所有的选择项，格式请参照示例	Array	/
searchable	是否可搜索，设置该属性为true时，可以根据子节点的title进行搜索	Boolean	false
clearable	是否可清空	Boolean	false
width	设置组件的宽度	String	300