Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)
实现效果
完整代码
<div class="box-pos"><el-table ref="table" :header-cell-style="{ color: '#FFF', background: '#333' }":cell-style="{ color: '#FFF', background: '#333' }" :data="grListData" style="width: 100%"@selection-change="selectionChange"><template slot="empty"><span style="color: #969799">{{ $t("NeoLight.empty") }}</span></template><el-table-column type="selection" width="50" /><el-table-column prop="plantCode" label="厂区" /><el-table-column prop="grCode" label="单据号" /><el-table-column prop="grItem" label="单据行" /><el-table-column prop="grDate" label="单据日期" /><el-table-column prop="materialCode" label="料号" />//........</el-table>
</div>
js代码
data() {return {multipleSelection: [],};},methods: {selectionChange(data) {this.multipleSelection = []if (data.length > 1) {this.$refs.table.clearSelection()this.$refs.table.toggleRowSelection(data[data.length - 1])}this.multipleSelection = data[data.length - 1] ? [data[data.length - 1]] : []},}
隐藏表头上的全选Checkbox
.box-pos {/**找到表头那一行，然后把里面的复选框隐藏掉**/::v-deep .el-table__header-wrapper .el-checkbox {display: none !important;}}
参考链接：https://blog.csdn.net/a772116804/article/details/131899825