对于多选表格,选中某一工序后,该工序及后续所有工序自动选择。

// 点击表格全选CheckBox
@select-all="handleSelectAll"

handleSelectAll(selection) {
	if(selection.length == 0) {
		// 取消全选
		for(let item in this.tableData) {
			item.rowFlag = false;
		}
	} else {
		// 全选
		for(let item in this.tableData) {
			item.rowFlag = true;
		}
	}
}

// --------------------------------------------------------------------

// 点击表格CheckBox
@select="handleSelect"

handleSelect(selection, row) {
	this.tableData.forEach((item, index) => {
		// 比当前行index大的行选中
		if(item.index > row.index) {
			item.rowFlag = true;
			this.$refs.tableRef.toggleRowSelection(item, true);
		}
		if(item.index == row.index) {
			item.rowFlag = !item.rowFlag;
		}
		// 比当前行index小的行取消选中
		if(item.index < row.index) {
			item.rowFlag = false;
			this.$refs.tableRef.toggleRowSelection(item, false);
		}
	})
}

// ------------------------------------------------------------------------

// 点击表格行
@row-click="handleRowClick"

handleRowClick(row) {
	row.rowFlag = !row.rowFlag;
	this.$refs.tableRef.toggleRowSelection(row, row.rowFlag);
	this.handleSelect([], row);
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤实现在 Element UI 多选表格中通过函数取消某一条数据的选中状态: 1. 首先,在表格组件的data属性中定义一个数组selectedRows,用来存储当前选中的所有行的数据。 ``` data() { return { selectedRows: [], // 存储选中的行数据 // ... } } ``` 2. 在多选表格的el-table组件中,绑定row-selected事件,每当用户选中或取消选中一条数据时,都会触发这个事件。在事件处理函数中,将选中的数据保存到selectedRows数组中。 ``` <el-table :data="tableData" :row-selection="{selectedRows, onChange: handleSelectionChange}" @row-selected="handleRowSelected" > <!-- ... --> </el-table> methods: { handleSelectionChange(selectedRows) { this.selectedRows = selectedRows }, handleRowSelected(row, index) { // 在这里可以做一些其他的操作 } } ``` 3. 当需要取消某一条数据的选中状态时,可以定义一个函数,通过遍历selectedRows数组,找到要取消选中的数据,然后从数组中删除即可。 ``` methods: { // 取消选中指定的行数据 deselectRow(row) { const index = this.selectedRows.findIndex(item => item.id === row.id) if (index !== -1) { this.selectedRows.splice(index, 1) } } } ``` 4. 调用deselectRow函数即可取消指定行的选中状态。 ``` <el-button @click="deselectRow(row)">取消选中</el-button> ``` 以上是基本的实现思路,具体实现代码可能需要根据您的实际情况进行调整。希望能够帮到您!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值