修改 element中的el-table 表格组件的多选表格功能变为单选,且去除表头的多选框

(亲测可用)

这是element 中表格组件中的 多选 功能, 需要改成下图所标注的情况:

1. 将element中的 table 表格 组件中的 多选 代码,拷贝到自己的前端项目中:

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

2. 去除 表头出行 多选的勾选框 : 

在 el-table 的标签中 加上样式 class = "table-style",从样式上隐藏 该全选的勾选框, 代码如下:

​
<el-table 
    class= "table-style"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>

    .
    .
    .
    .

    <-- 从样式上 隐藏 全选勾选框 -->
    <style lang="less">
        .table-style {
          .el-table-column--selection.is-leaf .el-checkbox {
            display: none;
          }
        }
    </style>
​

3. 将多选改为 单选 功能 : 

在el-table 的标签中重新定义 一个方法 @select="selectInfo" ,用于将单选功能实现, 代码如下:

</template>
 <el-table 
    class= "table-style"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @select="selectInfo">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>
<script>
data() {
    return {
     
      multipleTable: "", //所选择的表格数据指向
   
    };
  },
    .
    .

     methods: {

       selectInfo(selection, row) {
          console.log(selection, row);
          // 清除 所有勾选项
          this.$refs.multipleTable.clearSelection();
          // 当表格数据都没有被勾选的时候 就返回
          // 主要用于将当前勾选的表格状态清除
          if (selection.length == 0) return;
          this.$refs.multipleTable.toggleRowSelection(row, true);
        },        

     }

<script>

    .
    .

    <-- 从样式上 隐藏 全选勾选框 -->
    <style lang="less">
        .table-style {
          .el-table-column--selection.is-leaf .el-checkbox {
            display: none;
          }
        }
    </style>
​
 

以上就全部处理完毕,可以实现从多选到单选了☺☺☺