|
VUE 树形控件
用清晰的层级结构展示信息,可下拉选择、展开或折叠,提供单选多选功能,支持v-model双向数据绑定
安装
npm i k-tree-select
使用
<template>
<div>
<tree-select
only-leaf
show-checkbox
type="tree"
v-model="selectValue"
:label-key="labelKey"
:value-key="valueKey"
:data-source="list"
@on-toggle-expand="toggleExpand"
@on-select-change="selectChange"
@on-check-change="checkChange"
></tree-select>
</div>
</template>
<script>
import TreeSelect from "@idev4/k-tree-select";
// Vue.use(TreeSelect)
export default {
components: {TreeSelect},
data() {
return {
list: [
{
name: "霍山县",
pId: "341500000000000",
open: "False",
id: "341525000000000",
children: [
{
name: "衡山镇",
pId: "341525000000000",
open: "False",
id: "341525100000000"
},
{
name: "与儿街镇",
pId: "341525000000000",
open: "False",
id: "341525104000000"
},
{
name: "黑石渡镇",
pId: "341525000000000",
open: "False",
id: "341525105000000"
},
{
name: "诸佛庵镇",
pId: "341525000000000",
open: "False",
id: "341525106000000"
},
{
name: "高桥湾现代产业园",
pId: "341525000000000",
open: "False",
id: "341525401000000"
}
]
}
],
showCheckBox: false,
type:'select',
labelKey: "name",
valueKey: "id",
childrenKey:'children',
selectValue:'341525401000000', //双向数据绑定当前选中值
};
},
mounted(){
setTimeout(()=>{
this.selectValue = "341525106000000";
},3000)
},
watch:{
selectValue(){
console.log('selectValue',this.selectValue);
},
},
methods: {
toggleExpand(node){
console.log('toggleExpand',node);
},
selectChange(node){
console.log('selectChange',node);
},
checkChange(nodes){
console.log('checkChange',nodes);
},
}
};
</script>
|
Attributes
属性 | 说明 | 类型 | 可选值 | 默认值 | 是否必须 |
---|
dataSource | 数据源 | Array | - | - | 是 |
labelKey | 数据显示key | String | - | label | 是 |
valueKey | 取值key (不传默认传递节点完整数据) | String | - | value | - |
childrenKey | 子集key | String | - | children | - |
v-model | 双向数据绑定 , props需传入valueKey,为 “,” 拼接的字符串 | String | - | - | - |
multiple | 单击多选 | - | - | - | - |
only-leaf | 只取叶子节点数据 | - | - | - | - |
show-checkbox | 开启复选框(复选框开启,v-model初始化可只传入需要选中的顶层节点的value ) | - | - | - | - |
img-source | 图标 | Object | node:'(img path)'、leaf:'(img path)'、caretRight:'(img path)'、caretDown:'(img path)', | - | - |
props | dataSource数据配置选项具体看下表 | - | - | - | - |
|
Props
参数 | 说明 | 类型 | 默认值 | 是否必须 |
---|
selected | 节点单选选中 | Boolean | - | - |
checked | 节点多选选中 | Boolean | - | - |
expand | 节点展开 | Boolean | - | - |
|
Events
方法名 | 说明 | 参数 |
---|
on-toggle-expand | 节点被点击展开收缩的时触发 | 传递 dataSource 属性的数组中该节点所对应的对象 ( 对象中expand 属性即当前展开状态 ) |
on-select-change | Attributes不含show-checkbox,节点被点选的时触发 | 传递 dataSource 属性的数组中所选中的对象 |
on-check-change | Attributes含show-checkbox,节点checkbox被点击的时触发 | 传递 dataSource 属性的数组中所选中的对象 |
|
methods
方法名 | 说明 | 参数 |
---|
getSelectedNodes | 获取当前单击选中的所有节点 | - |
getCheckedNodes | 获取当前多选选中的所有节点 | - |