<template>
<div class="orderManage tablePage flex_column">
<a-table ref="tableBox_"
:columns="columns"
:data-source="orderListData"
rowKey="id"
>
<template #customTitle>
<span style="position: absolute;left: 10px">
<a-checkbox v-model:checked="checkAll" @change="changeCheckAll">全选</a-checkbox>
</span>
宝贝
</template>
<template #nameBox="rowData">
<div class="">
<a-checkbox :checked="selectedRowKeys.includes(rowData.text.id)" @change="changeCheck(rowData)"></a-checkbox>
<span>复制订单号</span>
</div>
</template>
</a-table>
</div>
</template>
<script>
import { defineComponent,ref,reactive } from 'vue';
export default defineComponent({
name:"listTable",
data(){
return{
checkAll:false, //全选状态
selectedRowKeys: [], //选中的key
selectedRows: [], //选中的数据
columns:[
{title:'单价',align:'center',width:130,customCell: (_, index) => ({colSpan: 0})},
{title:'数量',align:'center',width:80,customCell: (_, index) => ({colSpan: 0})},
],
orderListData:[{id:111,name:"网卡"},{id:222,name:"深度"},{id:333,name:"打扫"}],
}
methods: {
changeCheckAll(){
if (this.selectedRowKeys.length === this.orderListData.length) {
this.selectedRowKeys = [] // 判断是否已全部选中,是则清空已选列表
this.selectedRows = [];
this.checkAll = false;
} else {
this.orderListData.forEach((item) => {
if (!this.selectedRowKeys.includes(item.id)) {
this.selectedRowKeys.push(item.id) // 否则将未选中的全部加入已选列表中
this.selectedRows.push(item);
}
})
this.checkAll = true;
}
},
changeCheck(row){
if (!this.selectedRowKeys.includes(row.text.id)) {
this.selectedRowKeys.push(row.text.id);
this.selectedRows.push(row.text);
} else {
let index = this.selectedRowKeys.indexOf(row.text.id);
this.selectedRowKeys.splice(index, 1);
this.selectedRows.splice(index, 1);
}
console.log(" this.selectedRowKeys", this.selectedRowKeys)
console.log(" this.selectedRows", this.selectedRows)
},
}
});
</script>