ElementUI-复选框变单选

75 阅读1分钟

背景:产品需要把表格复选框多选功能变成单选,让用户只能选择一条

一、表格代码

      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#ededed' }"
        ref="refTable"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChange"
        @selection-change="selectionChange"
      >

二、核心代码

    selectionChange(row) {
      if (row.length > 1) {
        // 复选框变单选
        this.$refs.refTable.clearSelection();
        this.$refs.refTable.toggleRowSelection(row.pop());
      }
    },

三、最后一步细节完善,隐藏全选框CSS代码

image.png

.selectDialogTable ::v-deep .el-table__header {
  .el-checkbox {
    display: none;
  }
}