热门标签
热门文章
- 1macbook 下安装nginx并使用_macbook nginx
- 2经典同态加密算法Paillier解读 - 原理、实现和应用_同态加密联邦学习csdn
- 3电脑键盘常用快捷键_测试常用快捷键
- 4vscode调试Flutter_vscode 调试flutter
- 5网工扫盲篇：RSVP-TE 是什么？
- 6使用ftp报220问题的解决方案_ftps replay 220
- 7Mac自带的本地服务器的使用 以及 手机访问_mac 自建http服务器 与手机通讯
- 8Windows 系统下查找进程号和端口号_window同一个程序进程号一样吗
- 9鸿蒙使用的是微内核？
- 10亚商投顾早餐FM/0905北交所首只指数、两融制度要来了
当前位置: article > 正文
vue+element-ui 表格嵌套表格实现和勾选问题解决_vue中table表格主子表联动勾选数据提交
作者：AllinToyou | 2024-03-21 09:06:49
赞
踩
vue中table表格主子表联动勾选数据提交
vue+element-ui 表格嵌套表格实现和勾选问题解决
1.实现表格嵌套表格
主要是根据element-ui提供的type="expand"属性来实现，数据都是写死的数据哈~~~
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="children" type="expand"> <template slot-scope="slots"> <el-table :data="slots.row.children" style="width: 100%"> <el-table-column type="selection" width="50" show-overflow-tooltip reserve-selection /> <el-table-column label="11" prop="id" /> <el-table-column label="22" prop="name" /> </el-table> </template> </el-table-column> <el-table-column type="selection" width="50" show-overflow-tooltip reserve-selection /> <el-table-column label="单号" prop="id" /> <el-table-column label="名称" prop="name" /> <el-table-column label="价格" prop="price" /> <el-table-column label="总数量" prop="num" /> </el-table> </template> <script> export default { data() { return { tableData: [ { id: "1298712333232", name: "花甲", price: "15.9", num: "888", children: [ { id: "1", name: "随便" }, { id: "2", name: "随便2" } ] }, { id: "1489033233442", name: "鸡翅", price: "152.9", num: "18", children: [ { id: "1", name: "随便" }, { id: "2", name: "随便2" } ] }, { id: "1093443434", name: "鸡腿", price: "23.98", num: "38", children: [ { id: "1", name: "随便" }, { id: "2", name: "随便2" } ] }, { id: "19232243434", name: "小面包", price: "10.8", num: "30" } ] } } } </script> <style> .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
children中有数据正常显示，没有数据展示"暂无数据"。
问题：选择框中，二级表全部选中，一级表格选择框中没有样式，反过来一样。
2. 勾选问题
先给给一级表格和二级表格分别添加上：ref 和 @select
<el-table
ref="table"
:data="tableData"
style="width: 100%"
@select="handleSelectionChange"
@select-all="handleSelectionAll"
>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
给二级表格加上：ref 和 @select
<el-table
:ref="'tableChild' + props.$index"
:data="props.row.children"
style="width: 100%"
@select="handleSelectionChange2"
@select-all="handleSelectionAll2"
>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
改变了之前的数据，多了一个key值，大概是一下这样：
tableData: [
{
id: "1298712333232",
key: "1029733292929",
name: "花甲",
price: "15.9",
num: "888",
children: [
{ id: "1", key: "1029733292929", name: "随便" },
{ id: "2", key: "1029733292929", name: "随便2" }
]
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
添加方法：
主要用的就是element-ui 官网上的 toggleRowSelection(row, selected)方法，row 一定是一条数据哦。
methods: { //一级表格勾选 handleSelectionChange(selection, row) { //判断一级表格是否选中 选中--true 未选中--0 let isCheck = selection.length && selection.indexOf(row) !== -1; //循环整个表数据--找到勾选的 index this.tableData.forEach((item, index) => { if (item.id == row.id) { //在勾选时展开本行数据--不然找不到toggleRowSelection this.$refs.table.toggleRowExpansion(item, true); let tempList = row.children; this.$nextTick(() => { //以防二级列表没有数据 if (tempList) { //循环本次勾选的数据 tempList.forEach(selectionItem => { console.log(selectionItem, isCheck); this.$refs[`tableChild${index}`].toggleRowSelection( selectionItem, isCheck ); }); } }); } }); }, //二级表格勾选 handleSelectionChange2(selection, row) { //判断二级列表是否取消勾选（无数据） let isCheck = selection.length > 0; this.tableData.forEach((item, index) => { if (item.key == row.key) { this.$refs.table.toggleRowSelection(item, isCheck); } }); }, //一级表格全选->子表格全部勾选 handleSelectionAll(selection, row) { console.log(selection); this.tableData.forEach(async (item, index) => { await this.$refs.table.toggleRowExpansion(item, true); //判断取消还是勾选--取消清空选择数据 if (selection) { this.$refs[`tableChild${index}`].toggleAllSelection(); } else { this.$refs[`tableChild${index}`].clearSelection(); } }); }, //子表格勾选 --->联动一级表格 handleSelectionAll2(selection, row) { console.log(selection); if (selection.length > 0) { let list = this.tableData.find(item => { return item.key === selection[0].key; }); this.$refs.table.toggleRowSelection(list, true); } else { this.$refs.table.clearSelection(); } } } };
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
让我们看一下结果：
有问题欢迎指正哦~
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/279945
推荐阅读
相关标签
