el-table多选+树形table 使用toggleAllSelection全部勾选以后只有父节点被勾选父节点下的子节点都没被勾选 —— 已解决

最新推荐文章于 2024-03-06 11:15:19 发布

颜笑·

最新推荐文章于 2024-03-06 11:15:19 发布

阅读量1.4k

点赞数

文章标签：前端 elementui vue.js vue

本文链接：https://blog.csdn.net/init_yanxiao/article/details/131232107

版权

文章讨论了在Vue.js应用中，当使用el-table组件实现多选树形表格时遇到的问题，即全选操作只勾选了父节点而未勾选子节点。解决方案是通过手动递归调用toggleRowSelection方法来确保所有子节点也被选中。代码示例展示了如何在handleSelectionChange方法中处理这个问题。

摘要由CSDN通过智能技术生成

el-table多选+树形table 使用全部勾选以后只有父节点被勾选父节点下的子节点都没被勾选
解决思路， toggleAllSelection只会对tree的第一层做勾选，我们需要递归子节点来手动勾选
下面是代码片段

<el-table
				:data="treeData"
				style="width: 100%; margin-bottom: 20px; margin-top: 10px"
				row-key="id"
				border
				:tree-props="defaultProps"
				ref="dataTable"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55" />
				<el-table-column :prop="defaultProps.label" label="名称" sortable />
				<el-table-column :prop="defaultProps.value" label="值" sortable />
				<el-table-column :prop="defaultProps.originalType" label="原始类型" sortable />
				<el-table-column :prop="defaultProps.originalType" label="关系" sortable />
			</el-table>
			// 逻辑层
			// 触发的地方 也可以把mounted的代码放到渲染table环节中
	mounted() {
		this.$nextTick(() => {
					this.$refs.dataTable.toggleAllSelection()
					const event = new Event('selection-change', { bubbles: true, cancelable: true })
					this.$refs.dataTable.$el.dispatchEvent(event)
					console.log(this.$refs.dataTable.selection, '1  this.$refs.dataTable.selection')
					// this.handleSelectionChange(this.$refs.dataTable.selection)
				})
	},

// handleSelectionChange对table做递归勾选， 其中我使用到了[children]，如果你们是固定children不用加[]
	methods: {
		handleSelectionChange(rows) {
			let { children } = this.defaultProps
			const setChildSelected = (node, selected) => {
				if (node[children]) {
					node[children].forEach(child => {
						this.$refs.dataTable.toggleRowSelection(child, selected)
						setChildSelected(child, selected)
					})
				}
			}

			this.treeData.forEach(node => {
				if (rows.some(row => row === node)) {
					// 设置该节点选中
					this.$refs.dataTable.toggleRowSelection(node, true)
					setChildSelected(node, true)
				} else {
					// 取消该节点选中
					this.$refs.dataTable.toggleRowSelection(node, false)
					setChildSelected(node, false)
				}
			})
		}
	}

最后问题解决