element-ui中table中使用checkBox實現單選功能
阿新 • • 發佈:2020-09-09
需求:在表格的第一列加上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;
}