element table 通过点击行选中复选框

46 阅读1分钟
<el-table  
ref="multipleTable"  
:data="tableWaferData"  
@selection-change="handleCurrentRowSublist"  
@row-click="handleCurrentChange"  
border  
style="width: 100%"  
>  
<el-table-column type="selection" width="40" />  
<el-table-column prop="waferId" label="Wafer Id" min-width="85" show-overflow-tooltip />  
<el-table-column prop="createdTime" label="Create Time" show-overflow-tooltip />  
<el-table-column prop="slot" label="Slot No" min-width="75" show-overflow-tooltip />  
<el-table-column prop="defectNum" label="Defect Count" min-width="75" show-overflow-tooltip />  
</el-table>

<script setup lang="ts">
// 点击行选中复选框
const handleCurrentChange = (row) => {  
multipleTable.value.toggleRowSelection(row)  
}
// 获取到所有数据
const handleCurrentRowSublist = (val) => {  
// 每次清空数据  
selectMultipleTable.value = []  
val.forEach((item) => {  
selectMultipleTable.value.push(item.id)  
})  
  
// console.log('selectMultipleTable.value', selectMultipleTable.value)  
}
</script>