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);
};
相关推荐
Jyywww1213 分钟前
Uniapp+Vue3 使用父传子方法实现自定义tabBar
javascript·vue.js·uni-app
李少兄3 分钟前
CSS clip-path:前端开发中的裁剪技术
前端·css
zhengxianyi51515 分钟前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年22 分钟前
React vs Next.js
前端·javascript·react.js
谢尔登24 分钟前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
天若有情67324 分钟前
【JavaScript】React 实现 Vue 的 watch 和 computed 详解
javascript·vue.js·react.js
OEC小胖胖25 分钟前
16|总复习:把前 15 章串成一张 React 源码主线地图
前端·react.js·前端框架·react·开源库
董世昌4127 分钟前
HTTP协议中,GET和POST有什么区别?分别适用什么场景?
java·开发语言·前端
_OP_CHEN29 分钟前
【前端开发之HTML】(二)HTML 常见标签(上):从入门到实战,搞定网页基础排版!
前端·css·html·前端开发·网页开发·html标签
衫水1 小时前
Ubuntu 系统部署 Vue/Vite 应用到 Nginx
vue.js·nginx·ubuntu