table 更改屬性設置：
<el-table
ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@select="select" @row-click="rowClick"
@selection-change="handleSelectionChange"
stripe >
<el-table-column type="selection" width="55" align="center"> </el-table-column>
</el-table>
methods :
rowClick(row, column) {
const selectData = this.selectData;
this.$refs.multipleTable.clearSelection();
if (selectData.length == 1) {
selectData.forEach((item) => {
// 判斷 如果當前的一行被勾選, 再次點擊的時候就會取消選中
if (item == row) {
this.$refs.multipleTable.toggleRowSelection(row, false);
}
// 不然就讓當前的一行勾選
else {
this.$refs.multipleTable.toggleRowSelection(row, true);
}
});
} else {
this.$refs.multipleTable.toggleRowSelection(row, true);
}
},
async select(selection, row) {
await this.$refs.multipleTable.clearSelection(); // 執行完清空操作在進行下面的勾選
if (selection.length === 0) return;
this.$refs.multipleTable.toggleRowSelection(row, true);
},
handleSelectionChange(val) {
this.selectData = val; //表格選中數據接收
},
scss
/deep/.el-table__header-wrapper {
.el-checkbox__inner {
display: none;
}
}