125 lines
3.1 KiB
Markdown
125 lines
3.1 KiB
Markdown
## 树形层级选择器
|
||
### 简介
|
||
为统一样式而生，树形层级选择器，picker弹窗形式的，样式和比例参照uniapp的picker和uni-data-picker组件
|
||
* 支持单选、多选、父级选择，当然也支持单层选择
|
||
* 支持Object对象属性自定义映射
|
||
* 支持显示全部选中、部分选中、未选中三种状态
|
||
* 支持快速自定义简单样式（分割线、按钮、标题、对齐等），深入样式可复写css
|
||
|
||
### 使用方法
|
||
在 `script` 中引入组件
|
||
``` javascript
|
||
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
|
||
export default {
|
||
components: {
|
||
baTreePicker
|
||
}
|
||
```
|
||
在 `template` 中使用组件
|
||
``` javascript
|
||
<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择城市"
|
||
:localdata="listData" valueKey="value" textKey="label" childrenKey="children" />
|
||
```
|
||
在 `script` 中定义打开方法，和选择监听
|
||
``` javascript
|
||
methods: {
|
||
// 显示选择器
|
||
showPicker() {
|
||
this.$refs.treePicker._show();
|
||
},
|
||
//监听选择（ids为数组）
|
||
selectChange(ids, names) {
|
||
console.log(ids, names)
|
||
}
|
||
}
|
||
```
|
||
在 `template` 中调用打开
|
||
``` javascript
|
||
<view @click="showPicker">调用选择器</view>
|
||
```
|
||
|
||
### 属性
|
||
|属性名|类型|默认值|说明|
|
||
|:-|:-:|:--:|-:|
|
||
|localdata|Array|[]|源数据，目前支持tree结构，后续会考虑支持扁平化结构|
|
||
|valueKey|String|id|指定 Object 中 key 的值作为节点数据id|
|
||
|textKey|String|name|指定 Object 中 key 的值作为节点显示内容|
|
||
|childrenKey|String|children|指定 Object 中 key 的值作为节点子集|
|
||
|multiple|Boolean|false|是否多选，默认单选|
|
||
|selectParent|Boolean|true|是否可以选父级，默认可以|
|
||
|title|String| |标题|
|
||
|titleColor|String||标题颜色|
|
||
|confirmColor|String|#0055ff|确定按钮颜色|
|
||
|cancelColor|String|#757575|取消按钮颜色|
|
||
|switchColor|String|#666|节点切换图标颜色|
|
||
|border|Boolean|false|是否有分割线，默认无|
|
||
|
||
|
||
|
||
### 数据格式
|
||
|
||
注意：必须有id、name(id可通过valueKey来配置为其它键值，如value)字段，且唯一
|
||
|
||
``` json
|
||
[
|
||
{
|
||
id: 1,
|
||
name: '公司1',
|
||
children: [{
|
||
id: 11,
|
||
name: '研发部',
|
||
children: [{
|
||
id: 111,
|
||
name: '张三',
|
||
|
||
},{
|
||
id: 112,
|
||
name: '李四',
|
||
|
||
}]
|
||
},{
|
||
id: 12,
|
||
name: '综合部',
|
||
|
||
} ]
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '公司2',
|
||
children: [{
|
||
id: 21,
|
||
name: '研发部',
|
||
|
||
},{
|
||
id: 22,
|
||
name: '综合部',
|
||
|
||
},{
|
||
id: 23,
|
||
name: '财务部',
|
||
|
||
}, ]
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '公司3'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '公司4',
|
||
children: [{
|
||
id: 41,
|
||
name: '研发部',
|
||
|
||
}]
|
||
}
|
||
]
|
||
```
|
||
</details>
|
||
|
||
### 方法
|
||
|方法名|参数|默认值|说明|
|
||
|:-|:-:|:--:|-:|
|
||
|_show()| | |显示选择器|
|
||
|_hide()| | |隐藏选择器|
|