element-ui中table中使用checkBox實現單選功能

需求：在表格的第一列加上checkBox選擇框，並實現表格的單選功能

 

 首先采用element API中的多選屬性，利用多選把它改成單選.

HTML代碼如下： 添加一列col  type=selection

<!-- 表格區域 -->
<el-table
   v-if="focusTableFlag"
    ref="multipleTable"
    :data="tableData.list"
    tooltip-effect="light"
    :border="true"
    class="contactTable"
    :row-key="(row)=> {return row.id}" //使用 :reserve-selection="true" 時必須添加row-key
    :header-cell-style="{ background: '#f0f2f5', color: '#606266' }"
     @selection-change="handleSelectionChange">
      <el-table-column
         type="selection"
         :reserve-selection="true"
         width="55">
      </el-table-column>
</el-table>         

selection-change方法如下：

handleSelectionChange(val) {
   if (val.length > 1) {
   this.$refs.multipleTable.clearSelection(); //清空列表的選中
   this.$refs.multipleTable.toggleRowSelection(val[val.length-1]); //只顯示選中最后一個 這時val還是多選的列表(就是你選中的幾個數據)
   } else if (val.length === 1) {
        this.multipleTable = val[val.length-1];
   } else {
        this.multipleTable = []; //this.multipleTable是選中行的最后一條數據
   }
}

注意在其他方法中當清空列表選中時一定要給multipleTable重新賦值空數組

this.$refs.multipleTable.clearSelection();

this.multipleTable = [];

最后用樣式穿透讓全選的選擇框display:none;

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