vue实现树形表格数据
vue实现树形表格数据
在Vue中实现树形表格数据通常需要结合递归组件或第三方库。以下是几种常见方法：
使用递归组件
递归组件是Vue中处理树形结构的核心方法。创建一个可自调用的组件来渲染嵌套数据。
<template>
<table>
<tbody>
<tree-row v-for="(item, index) in treeData" :key="index" :item="item" />
</tbody>
</table>
</template>
<script>
export default {
components: {
TreeRow: {
template: `
<tr>
<td>{{ item.name }}</td>
<td v-if="item.children">
<table>
<tbody>
<tree-row v-for="(child, i) in item.children" :key="i" :item="child" />
</tbody>
</table>
</td>
</tr>
`,
props: ['item']
}
},
data() {
return {
treeData: [
{
name: 'Parent',
children: [
{ name: 'Child 1' },
{ name: 'Child 2' }
]
}
]
}
}
}
</script>使用element-ui的el-table
element-ui提供了内置的树形表格支持，通过设置row-key和tree-props属性即可实现。
<template>
<el-table
:data="tableData"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="value" label="值"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
name: '一级',
children: [{
id: 2,
name: '二级',
value: 'value'
}]
}]
}
}
}
</script>使用vue-table-with-tree-grid插件
专门为Vue设计的树形表格插件，提供开箱即用的功能。
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
Vue.use(TreeTable)<template>
<tree-table
:data="treeData"
:columns="columns"
expand-key="name">
</tree-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ label: '名称', prop: 'name' },
{ label: '值', prop: 'value' }
],
treeData: [
{
name: 'Parent',
value: '',
children: [
{ name: 'Child', value: '123' }
]
}
]
}
}
}
</script>自定义展开/折叠功能
对于更复杂的需求，可以手动实现展开/折叠逻辑。
<template>
<table>
<tbody>
<tr v-for="item in flattenedData" :key="item.id">
<td @click="toggleExpand(item)">
{{ '→'.repeat(item.level) }} {{ item.name }}
</td>
<td>{{ item.value }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
name: 'Parent',
children: [
{ id: 2, name: 'Child', value: 'test' }
]
}
],
expandedIds: [1]
}
},
computed: {
flattenedData() {
const flatten = (nodes, level = 0) => {
return nodes.reduce((acc, node) => {
acc.push({ ...node, level, isExpanded: this.expandedIds.includes(node.id) })
if (node.children && this.expandedIds.includes(node.id)) {
acc.push(...flatten(node.children, level + 1))
}
return acc
}, [])
}
return flatten(this.treeData)
}
},
methods: {
toggleExpand(item) {
const index = this.expandedIds.indexOf(item.id)
if (index > -1) {
this.expandedIds.splice(index, 1)
} else {
this.expandedIds.push(item.id)
}
}
}
}
</script>每种方法适用于不同场景，递归组件适合简单需求，element-ui提供企业级解决方案，而自定义实现则提供最大灵活性。根据项目复杂度和需求选择合适的实现方式。
