# 表格树
TIP
- 配置rowKey主键(默认为id)
- 配置rowParentKey父类主键(默认为parentId)
# 普通用法
defaultExpandAll属性是否全部展开,其他用法和普通crud一致,一定要配置rowKey主键和rowParentKey父类主键，如果非懒加载树形不显示，删除据中hasChildren字段
<template>
<avue-crud v-model="form"
:option="option"
:data="data"
ref="crud"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel">
<template #icon="scope">
<i :class="scope.row.icon"
style="font-size:24px"></i>
</template>
<template #menu="{row,size}">
<el-button :size="size"
text
type="primary"
@click="handleAdd(row)">新增子级</el-button>
</template>
</avue-crud>
</template>
<script>
export default {
data () {
return {
parentId: undefined,
form: {},
data: [
{
id: 10,
event: '事件1',
timeLine: 50,
comment: '无'
},
{
id: 1,
event: '事件1',
timeLine: 100,
comment: '无',
children: [
{
parentId: 1,
id: 2,
event: '事件2',
timeLine: 10,
comment: '无'
},
{
parentId: 1,
id: 3,
event: '事件3',
timeLine: 90,
comment: '无',
children: [
{
parentId: 3,
id: 4,
event: '事件4',
timeLine: 5,
comment: '无'
},
{
parentId: 3,
id: 5,
event: '事件5',
timeLine: 10,
comment: '无'
}
]
}
]
}
],
option: {
headerAlign: 'center',
align: 'center',
border: true,
index: true,
rowKey: 'id',
rowParentKey: 'parentId',
// defaultExpandAll:true,
column: [
{
label: '事件',
prop: 'event',
align: 'left',
width: 200
},
{
label: '时间线',
prop: 'timeLine'
},
{
label: '备注',
prop: 'comment'
}
],
}
}
},
methods: {
rowDel (row, index, done) {
done(row)
},
rowSave (row, done) {
row.parentId = this.parentId;
row.id = new Date().getTime()
this.parentId = undefined;
done(row)
},
rowUpdate (row, index, done) {
done(row)
},
handleAdd (row) {
this.parentId = row.id
this.$refs.crud.rowAdd()
}
}
}
</script>显示代码复制代码复制代码
# 表格树懒加载
lazy为true,同时接受tree-load函数的回调即可，通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点
<template>
<avue-crud ref="crud"
:option="option1"
:data="data1"
@tree-load="treeLoad"
@row-save="rowSave"
@row-update="rowUpdate">
<template #menu="{row,size}">
<el-button :size="size"
text
type="primary"
@click="handleAdd(row)">新增子级</el-button>
</template>
</avue-crud>
</template>
<script>
export default {
data () {
return {
parentId: undefined,
option1: {
lazy: true,
rowKey: 'id',
column: [{
label: '姓名',
prop: 'name'
}, {
label: '日期',
prop: 'date'
}, {
label: '地址',
prop: 'address',
overHidden: true
}]
},
data1: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
rowDel (row, index, done) {
done(row)
},
rowSave (row, done) {
row.parentId = this.parentId;
row.id = new Date().getTime()
this.parentId = undefined;
done(row)
},
rowUpdate (row, index, done) {
done(row)
},
handleAdd (row) {
this.parentId = row.id
this.$refs.crud.rowAdd()
},
treeLoad (tree, treeNode, resolve) {
setTimeout(() => {
resolve([{
id: new Date().getTime(),
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}
])
}, 1000)
}
}
}
</script>显示代码复制代码复制代码
# 左树右表
这是tree组件和crud组件的结合使用，主要是用nodeClick回调刷新crud数据
<template>
<el-container>
<el-aside width="200px">
<avue-tree :option="treeOption"
:data="treeData"
@node-click="nodeClick"></avue-tree>
</el-aside>
<el-main>
<avue-crud :data="loadData"
:option="loadOption"
v-model="obj"></avue-crud>
</el-main>
</el-container>
</template>
<script>
export default {
data () {
return {
obj: {},
treeData: [{
value: 0,
label: '一级部门',
children: [
{
value: 1,
label: '一级部门1',
}
]
}],
treeOption: {
defaultExpandAll: true,
formOption: {
labelWidth: 100,
column: [{
label: '自定义项',
prop: 'test'
}],
},
props: {
labelText: '标题',
label: 'label',
value: 'value',
children: 'children'
}
},
loadData: [],
loadData1: [
{
name: '张三',
sex: '男'
}
],
loadData2: [
{
name: '李四2',
sex: '女'
}
],
loadOption: {
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
}
}
},
created () {
this.loadData = this.loadData1;
},
methods: {
nodeClick (data) {
if (data.value == 0) {
this.loadData = this.loadData1;
} else if (data.value == 1) {
this.loadData = this.loadData2;
}
this.$message.success(JSON.stringify(data))
}
}
}
</script>显示代码复制代码复制代码