怎么调整vxe-table中的 "tree-config.transform" 与 "row.children"
时间: 2023-11-23 07:06:33 浏览: 399
Vue 使用vxe-table实现自定义分组合计及占比表组件
vxe-table中的"tree-config.transform" 和"row.children"可以通过以下方式进行调整:
1. 使用 "tree-config.transform" 属性将数据进行转换,例如:
```
<template>
<vxe-table :data="tableData" :tree-config="{expandAll: true, transform: true}">
<vxe-column type="index" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{name: 'John', age: 18, children: [{name: 'Tom', age: 22}]},
{name: 'Lucy', age: 20},
{name: 'Mike', age: 22}
]
}
}
}
</script>
```
2. 将数据的子节点存储在 "row.children" 中,例如:
```
<template>
<vxe-table :data="tableData" :tree-config="{expandAll: true}">
<vxe-column type="index" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="age" title="Age"></vxe-column>
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{name: 'John', age: 18, children: [{name: 'Tom', age: 22}]},
{name: 'Lucy', age: 20, children: []},
{name: 'Mike', age: 22, children: []}
]
}
}
}
</script>
```
以上两种方式都可以实现树形结构的展示,具体选择哪种方式取决于你的数据结构。
阅读全文