实现elementUI的表格组件只能同时选中一行,且不可以全选

需求:表格组件只可以同时选中一行,若已有某一行被选中,则再次点击其他行时,已选中的当前行变为未选中状态。
实现只可以选中一行
template

 <el-table
          height="94.8%"
          ref="multipleTable1"
          type="index"
          border
          style="width: 96%; border-bottom: 1px solid black"
          :data="tableData1"
          @select="select"
        >
          <el-table-column type="selection"></el-table-column>

          <el-table-column
            prop="sectionDataName"
            sortable
            label="名称"
          ></el-table-column>
          <el-table-column
            prop="sectionDataDescribe"
            align="center"
            sortable
            label="数据描述"
          ></el-table-column>
        </el-table>

methods

  select(selection, row) {
      this.timeData = row
      if (selection.length > 1) {
        let del_row = selection.shift() 
        this.$refs.multipleTable1.toggleRowSelection(del_row, false) // 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
      }
    },

toggleRowSelection用法
在这里插入图片描述
实现无法表格左上角无选择框,无法进行全选

.el-table__header-wrapper .el-checkbox {
  display: none;
}

为了防止项目中所有表格都无法进行全选,在当前样式前加一个表示当前页面的标识符,如下#sign是我自己定义的id选择符

#sign .el-table__header-wrapper .el-checkbox {
  display: none;
}

另外,style样式不能加人scoped等其他属性,直接写style就好

<style >
#sign.el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>

版权声明:本文为as965874原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。