• vue——基于element嵌套表格+多选

    2. 					<el-table :data="paramsList" :show-header="false" ref="tableF" @select="handleSelectionChange"
    3. 						:row-key="getRowKey">
    4. 						<el-table-column width="55" type="selection" :selectable='handleCheckbox1'>
    5. 						el-table-column>
    6. 						<el-table-column>
    7. 							<template slot-scope="scope">
    8. <div class="titleName">
    9. 									<span> {{scope.row.name}}span>
    10. 									
    11. 									<el-table :data="scope.row.goodsList" :show-header="false"
    12. 															:ref="'tableChildSon' + scope.$index"
    13. 															@select="handleSelectionChange3" :row-key="spuList.spuId">
    14. <el-table-column width="55" type="selection"
    15. 											:selectable='handleCheckbox2'>
    16. 										el-table-column>
    17. <el-table-column align="center">
    18. 											<template slot-scope="scopeSon">
    19. 												<div class="o-main">
    20. div>
    21. 											template>
    22. 										el-table-column>
    23. 									el-table>
    24. 								div>
    25. 							template>
    26. 						el-table-column>
    27. 					el-table>

    JS

    1. getRowKey(row) {
    2. 				return row.id;
    3. 			},
    4. //1级是否可以勾选
    5. 			handleCheckbox1(row, index) {
    6. 				if (!row.children) {
    7. 					return true
    8. 				}
    9. 			},
    10. 	//一级表格勾选
    11. 			handleSelectionChange(selection, row) {
    12. 				//判断一级表格是否选中  选中--true  未选中--0
    13. 				let isCheck = selection.length && selection.indexOf(row) !== -1;
    14. 				//循环整个表数据--找到勾选的 index
    15. 				this.paramsList.forEach((item, index) => {
    16. 					if (item.id == row.id) {
    17. 						let tempList = row.goodsList;
    18. 						this.spuList = []
    19. //这里的循环根据自己数据结构来写几层
    20. 						tempList.forEach((item1, index1) => {
    21. 							item1.spuList.forEach((items, indexs) => {
    22. 								this.spuList.push(items)
    23. 							})
    24. 						})
    25. 						//以防3级列表没有数据
    26. 						if (this.spuList) {
    27. 							//循环本次勾选的数据
    28. 							this.spuList.forEach((selectionItem, index) => {
    29. 								console.log('selectionItem', selectionItem, isCheck);
    30. 								this.$nextTick(function() {
    31. 									this.$refs["tableChildSon" + [index]]
    32. 										.toggleRowSelection(
    33. 											selectionItem,
    34. 											isCheck
    35. 										);
    36. 								});
    37. 							});
    38. 							// 联动外部全选框（大全选——没需要可不加
    39. 							if (this.shoped > this.spuList.length) {
    40. 								this.allType = true
    41. 							} else {
    42. 								this.allType = false
    43. 							}
    44. 						} else {
    45. 							this.$refs[`tableChildSon${index}`].clearSelection();
    46. 						}
    47. 					}
    48. 				})
    49. 			},
    50. //2级表格勾选
    51. 			handleSelectionChange3(selection, row) {
    52. 				// this.priceed = 0
    53. 				// this.shoped = 0
    54. 				//计算价格
    55. 				let isCheck = selection.length && selection.indexOf(row) !== -1;
    56. 				this.b[row.spuId] = row
    57. 				if (isCheck == true) {
    58. 					//总价
    59. 					this.priceed += this.b[row.spuId].totalPrice
    60. 					//件数
    61. 					this.shoped += 1
    62. 				} else {
    63. 					this.priceed -= this.b[row.spuId].totalPrice
    64. 					this.shoped -= 1
    65. 				}
    66. 				//判断3级列表是否取消勾选（无数据）
    67. 				if (isCheck === 0) {
    68. 					isCheck = false
    69. 				} else {
    70. 					isCheck = true
    71. 				}
    72. 				this.paramsList.map(item => {
    73. 					item.goodsList.forEach((itemson, index) => {
    74. 						if (itemson.id == row.goodsId && itemson.shopId == item.id) {
    75. 							this.$refs.tableF.toggleRowSelection(item, isCheck);
    76. 						}
    77. 					});
    78. 				})
    79. 			},

    删除数据

    this.paramsList.splice(index, 1)

    外部全选框

    1. class="select-all">
    2. 					<el-checkbox-group v-model="allType" @change="handleCheckAllChange">
    3. 						<el-checkbox label="全选" name="type" :checked="allType">el-checkbox>
    4. 					el-checkbox-group>
    5.
  • allType: false, //底部全选
    1. //外部一级全选
    2. 			handleCheckAllChange(selectBottom) {
    3. 				console.log(this.allChecked)
    4. 				selectBottom ? this.$refs.tableF.toggleAllSelection() : this.$refs.tableF.clearSelection()
    5. 				this.allType = selectBottom
    6. 				this.independentTableList = this.$refs.tableF.store.states.selection
    7. 				this.paramsList.forEach((item, index) => {
    8. 					this.$refs.tableF.toggleRowExpansion(item, true);
    9. 					const temp = item.goodsList;
    10. 					var sput = []
    11. 					temp.forEach((item1, index1) => {
    12. 						item1.spuList.forEach((items, indexs) => {
    13. 							sput.push(items)
    14. 						})
    15. 					})
    16. 					if (sput) {
    17. 						this.shoped = 0
    18. 						// this.priceed=0
    19. 						for (var k = 0; k < sput.length; k++) {
    20. 							//件数
    21. 							this.shoped += sput.length
    22. 							//计算价格
    23. 							this.priceed += sput[k].totalPrice
    24. 						}
    25. 					}
    26. 					//判断取消还是勾选--取消清空选择数据
    27. 					if (selectBottom) {
    28. 						this.$refs[`tableChildSon${index}`].toggleAllSelection();
    29. 					} else {
    30. 						this.$refs[`tableChildSon${index}`].clearSelection();
    31. 						this.shoped = 0
    32. 						this.priceed = 0
    33. 					}
    34. 				});
    35. 			},

  • 相关阅读:
    用代谢组学的方式，探索斑马鱼胚胎绒毛膜对微塑料和纳米塑料的屏障功能及其对胚胎发育的影响
    牛血清白蛋白-乳酸-羟乙酸共聚物 PLGA-BSA(bovine serum albumin)
    讲讲vue3下会造成响应式丢失的情况
    Nmap渗透测试指南之Nmap基础学习、Nmap主机发现
    解决mysql深度分页问题
    C++ list详解以及模拟实现
    Docker安装GitLab代码仓库
    chmod,rwx Linux文件属性笔记221107
    技术对比：Flutter vs. 传统桌面应用开发框架
    Vue-插槽
  • 原文地址：https://blog.csdn.net/weixin_58412143/article/details/125891809