vue2之el-table表格多选改单选

麻瓜呀2026-01-08 10:01

vue2之el-table表格多选改单选

模板代码

html 复制代码

<el-table ref="tableRef" :data="tableData" border class="order-plan-table" 
:show-summary="showSummary" @selection-change="handleSelectionChange" @select="handleSelect">
      <el-table-column type="selection" width="55" align="center" />
 </el-tabel>

script代码

js 复制代码

data() {
    return {
      ids: [],
      selectedRow: [],
    }
  },
//-----------------下面是methods--------------------------
// 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      if (selection.length > 0) {
        this.selectedRow = selection[selection.length - 1];
      } else {
        this.selectedRow = null;
      }
      this.$emit('selection-change', this.selectedRow);
    },
    handleSelect(selection, row) {
      // 点击单行时强制单选
      if (selection.length > 1) {
        this.$refs.tableRef.clearSelection();
        this.$refs.tableRef.toggleRowSelection(row, true);
      }
    },

样式,需要隐藏全选按钮, 这里使用了样式穿透, scss需留意

css 复制代码

<style scoped>
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
  /* 隐藏全选复选框 */
}
::v-deep .el-table__header-wrapper .el-table-column--selection .cell {
  padding-left: 0;
  /* 调整列间距 */
}
</style>