132 lines
4.5 KiB
Markdown
132 lines
4.5 KiB
Markdown
|
#### 参数说明
|
|||
|
|
|
|||
|
|
| 属性名 |类型| 默认值 | 说明|
|
|||
|
|
|:------------:|---|:-------:|--------------------------------------|
|
|||
|
|
| range |Array| - | 本地渲染数据|
|
|||
|
|
| idKey |String| id | 指定 Object 中 key 的值作为单条数据的唯一id|
|
|||
|
|
| nameKey |String| name | 指定 Object 中 key 的值作为选择器显示的内容|
|
|||
|
|
| allKey |String| value | 指定 Object 中 其他需要返回的内容|
|
|||
|
|
| title |String| - | 选择器的名称默认为空|
|
|||
|
|
| titleColor |String| #757575 | 标题的颜色|
|
|||
|
|
| confirmColor |String| #007aff | 确定按钮及选择框的颜色|
|
|||
|
|
| cancelColor |String| #757575 | 取消按钮的颜色|
|
|||
|
|
| currentIcon |String| 默认图标 | 折叠时的图标|
|
|||
|
|
| defaultIcon |String| 默认图标 | 打开之后的图标|
|
|||
|
|
| lastIcon |String| 默认无 | 没有子集时的图标|
|
|||
|
|
| multiple |Boolean| true | 是否可以多选（true:多选、false:单选）|
|
|||
|
|
| cascade |Boolean| false | 在(多选 && 父级可选)模式下，开启级联选择（true:级联、false:不级联） |
|
|||
|
|
| selectParent |Boolean| true | 父级是否可选（true:可选、false:不可选）|
|
|||
|
|
| maskClick |Boolean| true | 点击遮罩层是否关闭|
|
|||
|
|
| @cancel |Handler| - | 点击取消或点击遮罩层关闭时的回调方法|
|
|||
|
|
| @confirm |Handler| - | 点击确定按钮时的回调方法|
|
|||
|
|
|
|||
|
|
#### 返回值说明
|
|||
|
|
```vue
|
|||
|
|
treeConfirm(e) {
|
|||
|
|
console.log("你点击了确定")
|
|||
|
|
console.log(e)
|
|||
|
|
/**
|
|||
|
|
* e==>
|
|||
|
|
* [
|
|||
|
|
* {id: "100", name: "测试100", value: "冗余值"}
|
|||
|
|
* {id: "110", name: "测试110", value: "冗余值"}
|
|||
|
|
* {id: "111", name: "测试111", value: "冗余值"}
|
|||
|
|
* ]
|
|||
|
|
* e为选中的数据数组
|
|||
|
|
* e中的对象中有id(idKey指定的字段值)、name(nameKey指定的字段)、value(allKey指定的字段)
|
|||
|
|
*/
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 代码使用示例
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<button @click="showTree" type="primary" style="width: 50%; margin-top: 20px;">
|
|||
|
|
打开树形选择器
|
|||
|
|
</button>
|
|||
|
|
<peng-tree
|
|||
|
|
ref="pengTree"
|
|||
|
|
:range="range"
|
|||
|
|
idKey="id"
|
|||
|
|
nameKey="name"
|
|||
|
|
allKey="value"
|
|||
|
|
:multiple="false"
|
|||
|
|
:cascade="false"
|
|||
|
|
:selectParent="false"
|
|||
|
|
:foldAll="false"
|
|||
|
|
confirmColor="#007aff"
|
|||
|
|
cancelColor="#757575"
|
|||
|
|
title="标题"
|
|||
|
|
titleColor="#757575"
|
|||
|
|
@cancel="treeCancel"
|
|||
|
|
@confirm="treeConfirm"
|
|||
|
|
>
|
|||
|
|
</peng-tree>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
range: [{
|
|||
|
|
id: "100",
|
|||
|
|
name: "测试100",
|
|||
|
|
value: "冗余值",
|
|||
|
|
children: [{
|
|||
|
|
id: "110",
|
|||
|
|
name: "测试110",
|
|||
|
|
value: "冗余值",
|
|||
|
|
children: [{
|
|||
|
|
id: "111",
|
|||
|
|
name: "测试111",
|
|||
|
|
value: "冗余值",
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "200",
|
|||
|
|
name: "测试200",
|
|||
|
|
value: "冗余值",
|
|||
|
|
children: [{
|
|||
|
|
id: "220",
|
|||
|
|
name: "测试220",
|
|||
|
|
value: "冗余值",
|
|||
|
|
children: [{
|
|||
|
|
id: "222",
|
|||
|
|
name: "测试222",
|
|||
|
|
value: "冗余值",
|
|||
|
|
}]
|
|||
|
|
}]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "300",
|
|||
|
|
name: "测试300",
|
|||
|
|
value: "冗余值"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
showTree() {
|
|||
|
|
//打开选择器
|
|||
|
|
this.$refs.pengTree._show();
|
|||
|
|
//关闭选择器
|
|||
|
|
//this.$refs.pengTree._hide();
|
|||
|
|
},
|
|||
|
|
treeCancel(e) {
|
|||
|
|
console.log("你点击了取消")
|
|||
|
|
console.log(e)
|
|||
|
|
},
|
|||
|
|
treeConfirm(e) {
|
|||
|
|
console.log("你点击了确定")
|
|||
|
|
console.log(e)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
```
|