Vue3中实现el-table单选功能（取消前一项的选中）

需求描述

• 产品说，表格行要只能选中一个
• 且，不能使用el-radio方式
• 因为要可以取消选中
• 于是乎，有了当前的文章记录
• 我们先看效果图

效果图

代码思路

首先，把el-table的全选全不选勾选框取消

::v-deep(.myTable) {
  thead {
    th:nth-child(1) {
      .cell {
        display: none;
      }
    }
  }
}

然后，去除前一项的选中状态

@select="selectChange"

const selectChange = (selection) => {
  if (selection.length > 1) {
    // 1. 拿到选中数组中前一项的行数据
    const preRow = selection[0];
    // 2. 再把选中数组中的第一项（前一项）删除
    selection.splice(0, 1);
    // 3. 再根据前一项的数据去表格中取消选中对应的那一行
    singleTableRef.value.toggleRowSelection(preRow, false);
  }
  console.log("selection", selection[0]?.date);
};

完整代码

复制粘贴即用

A good memory is better than a bad pen. Record it down...