一、效果图
二、代码
<template>
<div>
<el-table ref="multipleTableRef" @select="handlerSelect"
:data="tableData"
@selection-change="handleSelectionChange"
@row-click="rowClickHandle" highlight-current-row>
<el-table-column type="selection" width="55" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</div>
</template>
<script setup>
import { reactive,ref, toRefs } from "vue"
const multipleTableRef = ref()
const data = reactive({
selectCheckList:[],
tableData:[
{
id:1,
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id:2,
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
id:3,
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
})
const {tableData} = toRefs(data)
// 表格某一行的单击事件
function rowClickHandle(row) {
const selectData = data.selectCheckList
multipleTableRef.value.clearSelection()
// if( selectData.length == 1 ) {
// selectData.forEach(item => {
// // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
// if (item == row) {
// multipleTableRef.value.toggleRowSelection(row, false);
// }
// // 不然就让当前的一行勾选
// else {
// multipleTableRef.value.toggleRowSelection(row, true);
// }
// })
// }
// else {
// multipleTableRef.value.toggleRowSelection(row, true);
// }
if (selectData.length == 1) {
const [item] = selectData;
const shouldSelect = item !== row;
multipleTableRef.value.toggleRowSelection(row, shouldSelect);
} else {
multipleTableRef.value.toggleRowSelection(row, true);
}
}
// 当用户手动勾选数据行的 Checkbox 时触发的事件
function handlerSelect(selection, row) {
// 清除 所有勾选项
multipleTableRef.value.clearSelection()
if(selection.length == 0) return
multipleTableRef.value.toggleRowSelection(row,true)
}
// 当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
console.log('表格的选中 可以获得当前选中的数据',val);
data.selectCheckList = val
}
</script>
<style scoped lang='scss'>
// 隐藏全选按钮
::v-deep .el-table th.el-table__cell:nth-child(1) .cell {
visibility: hidden;
}
</style>