a-table 增加rowKey=“id”
<a-table
style="background: #ffffff"
rowKey="id"
size="middle"
:pagination="ipagination"
:columns="columns"
:dataSource="myDataSource"
@change="handleTableChange"
:rowSelection="rowSelection"
bordered
:scroll="{
x: false,
y: record.options.scrollY
}"
>
<template slot="htmlSlot" slot-scope="text">
<span v-html="text"></span>
</template>
<template slot="htmlDate" slot-scope="text">
<span >{{simpleDateFormat(text,'yyyyMMdd')}}</span>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<a-button
v-else
:ghost="true"
type="primary"
icon="download"
size="small"
@click="downloadFile(text)">
下载
</a-button>
</template>
<span slot="action" slot-scope="text, record">
<span v-if="hasEdit"> <a @click="handleEdit(record)">编辑</a></span>
<a-divider v-if="hasEdit&&hasVolume" type="vertical" />
<span v-if="hasVolume">
<a @click="handleVolumn(record)">卷内</a>
</span>
<a-divider v-if="(hasEdit||hasVolume)&&(hasDelete||hasDetail)" type="vertical" />
<span v-if="hasDelete||hasDetail">
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item v-if="hasDetail">
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item v-if="hasDelete">
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</span>
</a-table>
```
```
data() {
return {
curSelectionRows:[] ,//当前页的选中记录集合
selectionRows: [], /* table选中records,包含分页选中的records*/
/* table选中keys*/
selectedRowKeys: [],
...
}
}
method
onSelectChange(selectedRowKeys, selectionRows) {
this.selectedRowKeys = selectedRowKeys;
this.curSelectionRows = selectionRows
let tmpSelectionRows = []
//当前页选中记录加上分页历史选中的记录
tmpSelectionRows = [...this.selectionRows,...this.curSelectionRows]
if(selectedRowKeys.length === 1){
let record = selectionRows[0]
record['tableName'] = this.tableName
// let nrecord = {}
//Object.keys(record).forEach(k => (nrecord[k.replace(this.tableName+'.','')] = record[k]))
this.$emit("handlemModify", record,'selectOneRecord');
}else{
this.$emit("handlemModify", tmpSelectionRows,'selectRecordIds');
}
},
handleTableChange(pagination, filters, sorter) {
//TODO 筛选
//console.log(pagination)
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.$set(this.ipagination,'current',pagination.current)
this.$set(this.ipagination,'pageSize',pagination.pageSize)
let nrecord = Object.assign(pagination,{tableName:this.tableName})
//翻页时,清除包含当前数据源的记录
let ds = this.myDataSource||[]
ds.forEach(it=>{
const idx = this.selectedRowKeys.findIndex(vl=>vl == it.id)
//keys中没有选中,则从历史记录selectionRows中删除中
if(idx == -1){
const idx1 = this.selectionRows.findIndex(vl=>vl.id == it.id)
if(idx1>-1){
this.selectionRows.splice(idx1,1)
}
}
})
//加上当前选中记录
if(this.curSelectionRows.length>0){
this.selectionRows = [...this.selectionRows,...this.curSelectionRows]
}
//alert(JSON.stringify(this.selectionRows))
// alert( this.selectionRows.length+' '+this.curSelectionRows.length)
this.curSelectionRows = []
this.$emit("handlemModify", nrecord,'handleTableChange');
}
}