el-table 单选

2021-06-24  本文已影响0人  哒哒哒哒da
简单来说,就是把el-table的多选改成单选
效果图.png
<el-table
   v-loading="loading"
   :data="list"
   class="typeTable"
   @select="handleSelectionChange"
 >
  <el-table-column
      type="selection"
      width="55"
      align="center"
    />
  <el-table-column
      label="XXXX"
      align="center"
      prop="XXX"
   />
</el-table>
// 选中数据
//原理就是取消所有选择,再选中点击的,达到单选效果
handleSelectionChange(selection) {
 if (selection.length > 1) {
   this.$refs.typeTable.clearSelection();
   this.$refs.typeTable.toggleRowSelection(selection.pop());
 }
}
//隐藏全选框
.typeTable {
  ::v-deep .el-table__header-wrapper {
    .el-table-column--selection {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读