vue3之el-table单选

el-table文档中没有表格数据单选,因此基于复选框实现数据单选限制。

主要实现代码

bash 复制代码
<el-table :data="tableList" ref="tableRef" @select="selectClick">
	...
</table>

// method
const selectClick = (selection) => {
  let selectRow = {};
  if (selection.length > 1) {
    let del_row = selection.shift(); // 删除选中的第一项
    tableRef.value.toggleRowSelection(del_row, false); //并改变table勾选状态
  }

  // 到这selection数据始终为1条
  if (selection.length) {
    selectRow = selection[0];
  }
  emit("getRow", selectRow);
};
相关推荐
IT_陈寒6 分钟前
Java的HashMap线程安全问题让我深夜掉光了头发
前端·人工智能·后端
三掌柜66610 分钟前
ArkWeb 手记 04|Web 返回键别再一刀切
前端·harmonyos
Wx-bishekaifayuan10 分钟前
Springcloud中学在线学习平台58883-计算机课程设计、毕业设计
java·vue.js·spring boot·学习·spring·spring cloud·课程设计
光影少年15 分钟前
RN与Flutter架构区别
前端·flutter·react native·react.js·架构·node.js
peter676823 分钟前
css学习小结
前端·css·学习
liangshanbo121524 分钟前
什么是CSS原子化?它的优劣势是什么?
前端·css·tensorflow·css原子化
.道阻且长.25 分钟前
C++ 11:可变参数模板
前端·c++·算法
IMPYLH30 分钟前
HTML 的 <th> 元素
前端·html
风骏时光牛马30 分钟前
AI浪潮下程序员的职场破局与能力成长思考
前端
ljt272496066132 分钟前
Vue笔记(九)--defineEmits
javascript·vue.js·笔记