基于 iView 的树选择器组件 | 您所在的位置:网站首页 › iview树状选择 › 基于 iView 的树选择器组件 |
产品最近提了一个 需要三级选择器 才能实现的需求,看了iView和Element-UI,没有找到合适的组件,然后做了一个基于iView的TreeSelect 组件。 github地址:https://github.com/FFFFF1/vue-super-tree-select install 安装 npm install vue-super-tree-select --save Usage 示例 该组件是基于iView的,请事先use iView 与其CSS; 如果出现下拉框 被其他组件遮盖时,请自行修改.content-box 的z-index值(默认为100);
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: '虾饺'} ] } ] } ] } } } config 配置项 属性说明类型默认值 pkey设置每一个节点的唯一标识Stringtitle v-model存放组件中选择的最底层节点信息,每个节点信息会自动加上一个value属性,记录其所有父节点的pkey值类似于:'id1/id2/id3'Array/ data组件中所有的选择项,格式请参照示例Array/ searchable是否可搜索,设置该属性为true时,可以根据子节点的title进行搜索Booleanfalse clearable是否可清空Booleanfalse width设置组件的宽度String300 |
CopyRight 2018-2019 实验室设备网 版权所有 |