离散复选框与表格复选框的关联

最新推荐文章于 2023-08-19 15:29:24 发布

Eason_qyl

最新推荐文章于 2023-08-19 15:29:24 发布

阅读量229

点赞数

分类专栏： WEB前端开发 JS

本文链接：https://blog.youkuaiyun.com/qyl_0316/article/details/118786692

版权

WEB前端开发同时被 2 个专栏收录

132 篇文章

订阅专栏

26 篇文章

订阅专栏

本文介绍如何在一个表格之外添加一个checkbox，使其与表格内的复选框联动，实现全选和单个操作同步。通过提供handleChecked和handleSelectionChange函数，展示了如何在Vue中实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：在表格外部再添加一个checkbox来关联表格内部的复选框，即：外部的checkbox和表格的checkbox动作，行为是一致的

<!--外部 checkbox-->
<div class="module-title">
 	<el-checkbox v-model="cart" label="购物" @change="handleChecked('cart')"></el-checkbox></div>
<!--表格-->
<el-table
	ref="multipleTable"
	:data="tableData"
	style="width: 100%"
	@selection-change="handleSelectionChange">
	<el-table-column
		prop="name"
		label="姓名"
		width="120">
	</el-table-column>
	<el-table-column
		prop="address"
		label="地址"
		show-overflow-tooltip>
	</el-table-column>
</el-table>

思路：1.全选：外部的 checkbox change事件要关联表格的
toggleAllSelection()事件，即：全选

// 全选函数
handleSelection() {
	this.$refs['multipleTable'].toggleAllSelection()
}
// 外部checkbox change事件
handleChecked() {
	this.handleSelection() // 这样点击外部checkbox就可以全选表格
}

反过来：表格的checkbox change事件要关联外部的checked状态

// 表格的全选
handleSelectionChange(val) {
// 先判断是不是全选状态：即选中的条目的length===tableData.length 反之，不全选
	let isAllSelected = val.length === this.tableData.length
	this.cart = isAllSelected
}