简介
安装zt-ui依赖的包
npm install vue -S
npm install vue-router -S
npm install element-ui -S
或
cnpm install vue -S
cnpm install vue-router -S
cnpm install element-ui -S
安装zt-ui
npm install zt-ui -S
或者
cnpm install zt-ui -S
引用引zt-ui包
// 引zt-ui包
// 我们的zt-ui也提供了按需引包
import { ZtTable } from 'zt-ui';
Vue.use(ZtTable);
ZtTree Attributes组件属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| treeData |
tree树形控件数据 |
Object |
请参考下面TreeData Attributes |
— |
| empty-text |
内容为空的时候展示的文本 |
String |
— |
— |
| highlightCurrent |
是否高亮当前选中节点 |
Boolean |
— |
false |
| default-expand-all |
是否默认展开所有节点 |
Boolean |
— |
false |
| expand-on-click-node |
是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点 |
Boolean |
— |
true |
| auto-expand-parent |
展开子节点的时候是否自动展开父节点 |
Boolean |
— |
true |
| node-key |
每个树节点用来作为唯一标识的属性，整颗树应该是唯一的 |
String |
— |
— |
| default-expanded-keys |
默认展开的节点的 key 的数组,与node-key结合使用 |
Array |
— |
— |
| show-checkbox |
节点是否可被选择 |
Boolean |
— |
false |
| check-strictly |
在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 |
Boolean |
— |
false |
| indent |
相邻级节点间的水平缩进，单位为像素 |
Number |
— |
16 |
| tree |
tree |
Object |
— |
— |
| tree |
tree |
Object |
— |
— |
TreeData Attributes 数据属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| treeData |
tree树形控件件数据 ,扁平化数据 |
Array |
— |
— |
| treeRelation |
tree树形控件件父子数据关系 |
Object |
— |
— |
TreeRelation Attributes 父子数据关系属性
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| id |
数据里的id |
String |
— |
— |
| pid |
数据里的父id |
String |
— |
— |
| children |
生成结果中子节点的字段名 |
String |
— |
— |
| showData |
tree展示字段 |
String |
— |
— |
treeData:{
treeData:[
{id: 6, parent_id: 2,showData:'在tree显示的内容', data: '这是其他数据'},
{id: 7, parent_id: 3, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 2, parent_id: 1, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 4, parent_id: 2, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 1, parent_id: 0, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 9, parent_id: 5, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 8, parent_id: 3, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 3, parent_id: 1, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 5, parent_id: 2, showData:'在tree显示的内容',data: '这是其他数据'},
{id: 10, parent_id:6, showData:'在tree显示的内容',data: '这是其他数据'}
]
treeRelation:{
id: 'id',
pid: 'parent_id',
children: 'kids',
showData:'showData'
}
上面的扁平化数据最终转化成以下树形json数据
[
{
"id": 1,
"parent_id": 0,
"data": "这是其他数据",
'showData': '在tree显示的内容',
"kids": [
{
"id": 2,
"parent_id": 1,
"data": "这是其他数据",
'showData': '在tree显示的内容',
"kids": [
{
"id": 6,
"parent_id": 2,
"data": "这是其他数据",
'showData': '在tree显示的内容',
"kids": [
{
"id": 10,
"parent_id": 6,
"data": "这是其他数据",
'showData': '在tree显示的内容',
}
]
},
{
"id": 4,
"parent_id": 2,
"data": "这是其他数据",
'showData': '在tree显示的内容',
},
{
"id": 5,
"parent_id": 2,
"data": "这是其他数据",
'showData': '在tree显示的内容',
"kids": [
{
"id": 9,
"parent_id": 5,
"data": "这是其他数据",
'showData': '在tree显示的内容',
}
]
}
]
},
{
"id": 3,
"parent_id": 1,
"data": "这是其他数据",
'showData': '在tree显示的内容',
"kids": [
{
"id": 7,
"parent_id": 3,
"data": "这是其他数据",
'showData': '在tree显示的内容',
},
{
"id": 8,
"parent_id": 3,
"data": "这是其他数据",
'showData': '在tree显示的内容',
}
]
}
]
}
]
上面的扁平化数据最终转化成以下树形json数据呈现的样式
扁平化数据最终转化成以下树形json数据呈现的样式
Tree方法
| 方法名 |
说明 |
参数 |
| getCheckedNodes |
若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组 |
(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点，默认值为 false |
| setCheckedNodes |
设置目前勾选的节点，使用此方法必须设置 node-key 属性 |
(nodes) 接收勾选节点数据的数组 |
| getCheckedKeys |
若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组 |
(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false |
| setCheckedKeys |
通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性 |
(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false |
| setChecked |
通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性 |
(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false |
ZtTree Events 事件
| 事件名称 |
说明 |
回调参数 |
| node-click |
节点被点击时的回调 |
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| current-change |
当前选中节点变化时触发的事件 |
共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 |
| node-expand |
节点被展开时触发的事件 |
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
| node-collapse |
节点被关闭时触发的事件 |
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
