在antd vue的表格显示中，合并多个字段到一列及自定义显示样
2020-12-03 本文已影响0人
万州客
前端工作中，这是一个相当常见的技术点。既然现在工作涉及到了，就好好学习，作好记录，应用于工作中吧~
一，假设数据
从后来请求的表格数据样例
0:
create_date: "2020-12-03T09:39:31.091178+08:00"
end_date: "2020-12-03T00:00:00+08:00"
id: 129
model_name: "1606959571089_model"
negative_sample_num: 74
positive_sample_num: 74
sample_num: 148
source: "metis"
start_date: "2020-01-01T00:00:00+08:00"
task_id: "1606959571089"
task_status: "running"
username: "admin"
window: 180
__proto__: Object
1:
create_date: "2020-12-02T16:43:41.258252+08:00"
end_date: "2020-12-02T00:00:00+08:00"
id: 126
model_name: "1606898621256_model"
negative_sample_num: 74
positive_sample_num: 74
sample_num: 148
source: "metis"
start_date: "2020-01-01T00:00:00+08:00"
task_id: "1606898621256"
task_status: "finish"
username: "admin"
window: 180
__proto__: Object
2: {id: 128, task_id: "1606959096688", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
3: {id: 127, task_id: "1606900405610", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
4: {id: 125, task_id: "1606898456280", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
5: {id: 124, task_id: "1606898322620", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
6: {id: 123, task_id: "1606895736126", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
7: {id: 122, task_id: "1606895641755", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
8: {id: 121, task_id: "1606894844220", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
9: {id: 120, task_id: "1606893609749", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
10: {id: 119, task_id: "1606893227684", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
11: {id: 118, task_id: "1606888820814", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
12: {id: 117, task_id: "1606888615764", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
13: {id: 116, task_id: "1606888510225", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
14: {id: 115, task_id: "1606888425692", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
15: {id: 114, task_id: "1606888390918", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
16: {id: 113, task_id: "1606887468522", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
17: {id: 112, task_id: "1606887312954", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
18: {id: 111, task_id: "1606887286576", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
19: {id: 110, task_id: "1606887258910", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
20: {id: 109, task_id: "1606887200678", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
21: {id: 108, task_id: "1606886677241", sample_num: 148, positive_sample_num: 74, negative_sample_num: 74, …}
length: 22
二，将ajax请求得到的数据，塞入指定变量
for (let i = 0; i < retData.data.length; i++) {
this.dataSource.push({
key: i,
id: retData.data[i].id,
taskId: retData.data[i].task_id,
sampleNum: retData.data[i].sample_num,
negativeSampleNum: retData.data[i].negative_sample_num,
positiveSampleNum: retData.data[i].positive_sample_num,
modelName: retData.data[i].model_name,
taskStatus: retData.data[i].task_status,
source: retData.data[i].source,
startDate: retData.data[i].start_date,
endDate: retData.data[i].end_date,
createDate: retData.data[i].create_date,
createUser: retData.data[i].username
})
}
三，定义columns变量
0，最正常的显示，一个字段一个列，title定义显示名，dataIndex和字段对应。
{
title: '模型',
dataIndex: 'modelName',
},
1，在表格同一列中，显示样本总数，负样本数及正样本数，此时，dataIndex已无意义，没用。
关于下面的customRender()函数，一个，两个，三个参数的意义，我没有系统的看到过，所以每次使用时，console.log()显示后，再提取要的数据。不专业~~~
{
title: '样本(总-负-正)',
customRender: (record, index) => {
const sampleNum = `${record.sampleNum}-${record.negativeSampleNum}-${record.positiveSampleNum}`
return sampleNum
}
},
3，在同一列中，显示样本数据的起止时间
{
title: '起止时间',
customRender: (record) => {
const time = `${this.$options.filters.dayFormat(record.startDate)}
~
${this.$options.filters.dayFormat(record.endDate)}`
return time
}
},
3，在一个列中不但显示数据，还使用tip显示额外信息
return多行，维护性不太好，需要使用第4点改进
{
title: '任务id',
dataIndex: 'taskId',
customRender: (text, record) => {
return (
<a-tooltip>
<template slot="title">
{this.$options.filters.minFormat(record.createDate)}
</template>
{text}
</a-tooltip>
)
}
},
4，scopedSlots结合customRender，作更优雅从容的自定义样式或操作
columns里的定义
{
title: '来源',
dataIndex: 'source',
scopedSlots: {customRender: 'source'}
},
{
title: '状态',
dataIndex: 'taskStatus',
scopedSlots: {customRender: 'taskStatus'}
},
{
title: '操作',
scopedSlots: { customRender: 'action' }
}
table里的定义，感觉有些模糊了div和template标签的用法，没有进一步探究，但效果一样。
<div slot="action" slot-scope="{text, record}">
<a @click="deleteRecord(record.key)">
<a-button type="danger" >删除</a-button>
</a>
</div>
<template slot="taskStatus" slot-scope="record">
<a-spin v-if="record.text==='running'" />
<a-tag color='red' v-if="record.text==='error'">训练出错</a-tag>
<a-tag color='green' v-if="record.text==='finish'">训练完成</a-tag>
</template>
<div slot='source' slot-scope="record">
<a-tag>{{record.text}}</a-tag>
</div>
四，将之前定义的数据，作为props传递到table中。
<standard-table
:columns="columns"
:dataSource="dataSource"
:selectedRows.sync="selectedRows"
@clear="onClear"
@change="onChange"
@selectedRowChange="onSelectChange"
>
...
五，显示
截屏2020-12-03上午10.21.54.png
