el-table表格点击该行任意位置时也勾选上其前面的复选框
作者：Angel_girl319
本文主要介绍了在el-table组件中实现双击表格某一行任意位置自动勾选复选框的功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
需求：当双击表格某一行任意位置时，自动勾选上其前面的复选框
1、在el-table 组件的每一行添加@row-dblclick事件，用于双击点击
<el-table
:data="tableData"
ref="tableRef"
@selection-change="handleSelectionChange"
@row-dblclick="handleRowClick"
>
<el-table-column type="selection" fixed width="55" align="center" />
<el-table-column
type="index"
fixed
label="序号"
width="75"
align="center"
/>
</el-table>2、定义方法在 `handleRowClick` 方法中，通过修改 `row` 对象中的某个属性来标记该行是否被选中，调用 `toggleRowSelection` 方法来切换多选框的勾选状态。
const sourceRef = ref();
//双击
const handleRowClick = (row) => {
console.log(row, "双击--");
row.isSelected = !row.isSelected;
tableRef.value.toggleRowSelection(row);
};到此这篇关于el-table表格点击该行任意位置时也勾选上其前面的复选框的文章就介绍到这了,更多相关el-table 任意位置勾选复选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！