基于vue+element UI的下拉树组件
ele-select-tree
属性(tree-select) 基于el-select+el-tree实现(推荐)
props
Build Setup基于vue+element UI的下拉树
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
尝试了两种实现方式,推荐第二种
属性(select-tree) 基于el-popper+el-tree+el-input实现| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 绑定值 | String/Number/Array | — | — |
| width | 输入框宽度,如不指定则自适应容器 | String | — | — |
| options | 选项数据 | Array | — | 必填 |
| placeholder | 输入框占位符 | String | — | 请选择 |
| props | 树节点配置选项,具体看下表 | Object | — | — |
| multiple | 是否可多选 | Boolean | — | false |
| filterable | 是否可过滤 | Boolean | — | false |
| clearable | 是否可清空 | Boolean | — | true |
| disabled | 是否禁用 | Boolean | — | false |
| size | 输入框尺寸 | String | medium/small/mini | — |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 绑定值 | String/Number/Array | — | — |
| options | 选项数据 | Array | — | [] |
| placeholder | 输入框占位符 | String | — | 请选择 |
| props | 树节点配置选项,具体看下表 | Object | — | — |
| multiple | 是否可多选 | Boolean | — | false |
| filterable | 是否可过滤 | Boolean | — | false |
| clearable | 是否可清空 | Boolean | — | true |
| disabled | 是否禁用 | Boolean | — | false |
| accordion | 是否每次只展开一个同级树节点 | Boolean | — | false |
| size | 输入框尺寸 | String | medium/small/mini | — |
| checkStrictly | 父子节点选择状态是否不互相关联 | Boolean | — | false |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 指定节点实际值为节点对象的某个属性值 | String | — | 'value' |
| label | 指定节点显示值为节点对象的某个属性值 | String | — | 'label' |
| children | 指定子树为节点对象的某个属性值 | String | — | 'children' |
Demo
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。