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);
};
相关推荐
苏打水com17 分钟前
第十二篇:Day34-36 前端工程化进阶——从“单人开发”到“团队协作”(对标职场“大型项目协作”需求)
前端·javascript·css·vue.js·html
知了清语18 分钟前
为天地图 JavaScript API v4.0 提供 TypeScript 类型支持 —— tianditu-v4-types 正式发布!
前端
程序员Sunday22 分钟前
为什么 AI 明明写后端更爽,但却都网传 AI 取代前端,而不是 AI 取代后端?就离谱...
前端·后端
之恒君29 分钟前
React 性能优化(方向)
前端·react.js
coding随想34 分钟前
JavaScript Notifications API:告别alert弹窗,开启沉浸式用户体验革命!
开发语言·javascript·ux
钝挫力PROGRAMER39 分钟前
Vue中选项式和组合式API的学习
javascript·vue.js
3秒一个大43 分钟前
Vue 任务清单开发:数据驱动 vs 传统 DOM 操作
前端·javascript·vue.js
阿蒙Amon43 分钟前
JavaScript学习笔记:2.基础语法与数据类型
javascript·笔记·学习
an869500143 分钟前
vue自定义组件this.$emit(“refresh“);
前端·javascript·vue.js
Avicli44 分钟前
Gemini3 生成的基于手势控制3D粒子圣诞树
前端·javascript·3d