需求场景:
点击表格行,或者表格最左侧的复选框列,选中当前表格,而且只允许选择一行,选中一行,上一行自动取消选中
效果如下:
部分代码只留了表格部分相关代码
<template>
<div class=" mytable-container">
<div class="table-container">
<el-table :data="circleAdminList" style="width: 100%" border
ref="multipleTable"
@selection-change="handleSelectionChange"
@select="selectChange"
@row-click="handleRowClick"
@select-all="selectAll">
<el-table-column width="60px" type="selection" align="center"></el-table-column>
<el-table-column label="会员昵称" prop="nick" align="center" > </el-table-column>
<el-table-column label="手机号码" prop="phone" align="center" > </el-table-column>
<el-table-column label="注册时间" align="center" prop="createTime" width="250px"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
handleSelectionList: []
}
},
methods: {
handleSelectionChange(value) {
this.handleSelectionList = value
},
selectChange(selection, row) {
if (selection.length > 1) {
const del_row = selection.shift()
this.$refs.multipleTable.toggleRowSelection(del_row, false)
}
},
// 点击行触发,选中或不选中复选框
handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row)
this.selectChange(this.handleSelectionList)
},
selectAll(selection) {
if (selection.length > 1) {
selection.length = 1
}
}
}
}
</script>