表格树
约 198 字小于 1 分钟
2025-02-06
提示
- 配置rowKey主键(默认为id)
- 配置rowParentKey父类主键(默认为parentId)
普通用法
vue2
vue3
`defaultExpandAll`属性是否全部展开,其他用法和普通crud一致,一定要配置`rowKey`主键和`rowParentKey`父类主键,如果非懒加载树形不显示,删除据中`hasChildren`字段
<template>
<tvue-crud v-model="form"
:option="option"
:data="data"
ref="crud"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel">
<template #icon="{ row }">
<i :class="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>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const crud = ref(null)
const parentId = ref(undefined);
const form = ref({});
const data = ref([
{
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: '无'
}
]
}
]
}
]);
const option = {
headerAlign: 'center',
align: 'center',
border: true,
index: true,
rowKey: 'id',
rowParentKey: 'parentId',
column: [
{
label: '事件',
prop: 'event',
align: 'left',
width: 200
},
{
label: '时间线',
prop: 'timeLine'
},
{
label: '备注',
prop: 'comment'
}
]
};
const rowDel = (row, index, done) => {
done(row);
};
const rowSave = (row, done) => {
row.parentId = parentId.value;
row.id = new Date().getTime();
parentId.value = undefined;
done(row);
};
const rowUpdate = (row, index, done) => {
done(row);
};
const handleAdd = (row) => {
parentId.value = row.id;
if (crud) {
crud.value.rowAdd();
}
};
</script>表格树懒加载
vue2
vue3
`lazy`为`true`,同时接受`tree-load`函数的回调即可,通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点
<template>
<tvue-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>
</tvue-crud>
</template>
<script setup>
import { ref } from 'vue';
const crud = ref(null);
const parentId = ref(undefined);
const option1 = {
lazy: true,
rowKey: 'id',
column: [{
label: '姓名',
prop: 'name'
}, {
label: '日期',
prop: 'date'
}, {
label: '地址',
prop: 'address',
overHidden: true
}]
};
const data1 = ref([
{
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 弄'
}
]);
function rowDel (row, index, done) {
done(row);
}
function rowSave (row, done) {
row.parentId = parentId.value;
row.id = new Date().getTime();
parentId.value = undefined;
done(row);
}
function rowUpdate (row, index, done) {
done(row);
}
function handleAdd (row) {
parentId.value = row.id;
crud.value.rowAdd();
}
function treeLoad (tree, treeNode, resolve) {
setTimeout(() => {
resolve([{
id: new Date().getTime(),
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}]);
}, 1000);
}
</script>左树右表
vue2
vue3
这是`tree`组件和`crud`组件的结合使用,主要是用`nodeClick`回调刷新`crud`数据
<template>
<el-container>
<el-aside width="200px">
<tvue-tree :option="treeOption"
:data="treeData"
@node-click="nodeClick"></tvue-tree>
</el-aside>
<el-main>
<tvue-crud :data="loadData"
:option="loadOption"
v-model="obj"></tvue-crud>
</el-main>
</el-container>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const obj = ref({});
const treeData = ref([
{
value: 0,
label: '一级部门',
children: [
{
value: 1,
label: '一级部门1',
}
]
}
]);
const treeOption = {
defaultExpandAll: true,
formOption: {
labelWidth: 100,
column: [{
label: '自定义项',
prop: 'test'
}],
},
props: {
labelText: '标题',
label: 'label',
value: 'value',
children: 'children'
}
};
const loadData = ref([]);
const loadData1 = [
{
name: '张三',
sex: '男'
}
];
const loadData2 = [
{
name: '李四2',
sex: '女'
}
];
const loadOption = {
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
}
]
};
onMounted(() => {
loadData.value = loadData1;
});
const nodeClick = (data) => {
if (data.value == 0) {
loadData.value = loadData1;
} else if (data.value == 1) {
loadData.value = loadData2;
}
console.log(JSON.stringify(data));
};
</script>