在
Vue2中
结合使用
el-table和
el-tree并使
树形结构支持勾选可按以下步骤实现：
### 1
. 基本组件结构
在
Vue组件中引入`
el-table`和`
el-tree`，同时在`
el-table`的列中使用`
el-tree`来呈现
树形结构，并为`
el-tree`
添加复选框。
```
vue
<template>
<
el-table
:data="
tableData"
border
@s
election
-change="handleS
electionChange"
>
<
el-table-column type="s
election" width="55"></
el-table-column>
<
el-table-column prop="name" lab
el="Name">
<template slot
-scope="scope">
<
el-tree
:data="[scope
.row]"
show
-checkbox
node
-key="id"
:default
-checked
-keys="checkedKeys"
@check
-change="handle
TreeCheckChange"
></
el-tree>
</template>
</
el-table-column>
</
el-table>
<
el-button @click="toggleAllS
election">全选/反选</
el-button>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: 'Parent 1',
children: [
{ id: 2, name: 'Child 1' },
{ id: 3, name: 'Child 2' }
]
}
],
checkedKeys: [],
multipleS
election: []
};
},
methods: {
handleS
electionChange(val) {
this
.multipleS
election = val;
},
handle
TreeCheckChange(data, checked, indeterminate) {
// 处理树节点勾选变化逻辑
if (checked) {
this
.checkedKeys
.push(data
.id);
}
else {
const index = this
.checkedKeys
.indexOf(data
.id);
if (index >
-1) {
this
.checkedKeys
.splice(index, 1);
}
}
},
toggleAllS
election() {
if (this
.multipleS
election
.length === this
.tableData
.length) {
this
.$refs
.multiple
Table.clearS
election();
}
else {
this
.tableData
.forEach(row => {
this
.$refs
.multiple
Table.toggleRowS
election(row);
});
}
}
}
};
</script>
```
### 2
. 父子节点勾选联动
为了实现选中父节点同时勾选其所有子节点，需要在`handle
TreeCheckChange`方法中
添加额外逻辑来处理父子节点的勾选状态。
```
javascript
handle
TreeCheckChange(data, checked, indeterminate) {
const checkChildren = (node, isChecked) => {
if (node
.children) {
node
.children
.forEach(child => {
this
.$refs
.tree.setChecked(child
.id, isChecked);
checkChildren(child, isChecked);
});
}
};
checkChildren(data, checked);
if (checked) {
this
.checkedKeys
.push(data
.id);
}
else {
const index = this
.checkedKeys
.indexOf(data
.id);
if (index >
-1) {
this
.checkedKeys
.splice(index, 1);
}
}
}
```
### 3
. 全选/反选功能
在`toggleAllS
election`方法中实现全选和反选功能，同时要确保表格行和
树形结构的勾选状态保持一致。
```
javascript
toggleAllS
election() {
const isAllS
elected = this
.multipleS
election
.length === this
.tableData
.length;
this
.tableData
.forEach(row => {
this
.$refs
.multiple
Table.toggleRowS
election(row, !isAllS
elected);
const check
TreeNodes = (node, isChecked) => {
this
.$refs
.tree.setChecked(node
.id, isChecked);
if (node
.children) {
node
.children
.forEach(child => {
check
TreeNodes(child, isChecked);
});
}
};
check
TreeNodes(row, !isAllS
elected);
});
}
```
### 4
. 动态数据与懒加载
如果需要支持动态接口数据传入或懒加载数据，可在获取数据后更新`
tableData`，并使用`this
.$nextTick`确保DOM更新后再进行相关
操作。
```
javascript
fetchData() {
// 模拟接口请求
setTimeout(() => {
this
.tableData = [
{
id: 1,
name: 'Parent 1',
children: [
{ id: 2, name: 'Child 1' },
{ id: 3, name: 'Child 2' }
]
}
];
this
.$nextTick(() => {
// DOM更新后执行
操作
});
}, 1000);
}
```
### 5
. 表格分页
若要支持表格分页，可使用`
el-pagination`组件，并在分页变化时重新加载数据。
```
vue
<template>
<div>
<
el-table
:data="
tableData"
border
@s
election
-change="handleS
electionChange"
>
<!
-- 表格列定义
-->
</
el-table>
<
el-pagination
@size
-change="handleSizeChange"
@current
-change="handleCurrentChange"
:current
-page="currentPage"
:page
-sizes="[10, 20, 30]"
:page
-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></
el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0
};
},
methods: {
handleSizeChange(newSize) {
this
.pageSize = newSize;
this
.fetchData();
},
handleCurrentChange(newPage) {
this
.currentPage = newPage;
this
.fetchData();
},
fetchData() {
// 根据当前页码和每页数量请求数据
}
}
};
</script>
```
### 注意事项
- 确保为`
el-tree`绑定`node
-key`属性，以便正确识别节点，如`node
-key="id"` [^2]。
- 在
修改数据后若需要
操作更新后的DOM，可使用`this
.$nextTick`方法 [^2]。
本文介绍了如何在Vue.js应用中结合el-tree组件和el-table组件，实现树形数据的添加与修改操作。讨论了搜索功能的实现，以及在操作过程中遇到的表头样式塌陷问题，并提供了解决方案。
最低0.47元/天 解锁文章
扫一扫
3839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
