Element 的Table组件判断当前是勾选状态还是取消勾选状态

最近有个需求,就是需要判断当前表格勾选的是选中的还是取消选中的。

后来找到了个方法如下

onTableSelect(rows, row) {
    let selected = rows.length && rows.indexOf(row) !== -1
}

控制台输出的值

true就是选中

0就是取消勾选状态。

 

Vue3和Element Plus中,如果你想通过代码手动取消或选中表格中的勾选列,你需要对Element Plus的表格组件勾选列进行操作。Element Plus是Element UI的官方继承版本,它适配了Vue 3。在Element Plus中,可以通过以下步骤来实现手动控制勾选状态: 1. 在`<el-table>`组件中定义列时,为需要进行手动勾选控制的列添加`type="selection"`属性,这样它就会变成一个勾选列。 2. 通过定义一个`ref`来获取表格的引用,这样可以在组件的其他地方通过这个`ref`访问表格实例。 3. 使用表格实例的`setRowSelection`方法来改变指定行的选中状态,或者使用`clearSelection`方法来清空所有的勾选状态。 下面是一个简单的示例代码,演示了如何进行操作: ```vue <template> <el-table ref="tableRef" :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <!-- 其他列 --> </el-table> <el-button @click="toggleSelect">切换勾选</el-button> </template> <script setup> import { ref } from 'vue'; import { ElTable } from 'element-plus'; const tableData = ref([ // ... 表格数据 ]); const tableRef = ref(null); const toggleSelect = () => { // 获取表格当前的选中行数据 const selectedRows = tableRef.value.getCheckedRows(); if (selectedRows.length > 0) { // 如果有选中的行,取消勾选 tableRef.value.clearSelection(); } else { // 如果没有选中的行,手动勾选第一行 const firstRow = tableData.value[0]; const rowIndex = tableData.value.indexOf(firstRow); tableRef.value.setRowSelection([rowIndex], true); } }; </script> ```
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫竹修

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值