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);
};
相关推荐
Ulyanov16 小时前
从桌面到云端:构建Web三维战场指挥系统
开发语言·前端·python·tkinter·pyvista·gui开发
cypking16 小时前
二、前端Java后端对比指南
java·开发语言·前端
摘星编程16 小时前
用React Native开发OpenHarmony应用:timing定时动画参数
javascript·react native·react.js
糠帅傅蓝烧牛肉面16 小时前
单实例多MCP聚合服务:两种实现方案深度对比
前端·docker·ai
JosieBook16 小时前
【Vue】12 Vue技术—— Vue 事件修饰符详解:掌握事件处理的高级技巧
前端·javascript·vue.js
摘星编程16 小时前
在OpenHarmony上用React Native实现AnimatedValue补间动画
javascript·react native·react.js
摘星编程17 小时前
React Native鸿蒙版:AnimatedXY双轴动画完整代码
javascript·react native·react.js
艾斯特_17 小时前
Echarts常用配置项及解释
前端·javascript·echarts
m0_5027249517 小时前
飞书真机调试
开发语言·前端·javascript
我只会写Bug啊18 小时前
复制可用!纯前端基于 Geolocation API 实现经纬度获取与地图可视化
前端·高德地图·地图·百度地图·经纬度