今天开发当中使用到的知识点。在将后端的列表数据，显示到前端的表格中时，如果要自定义一些显示网格，应该如何传参数和自定义渲染呢？
一，columns的定义
const columns = [
{
title: '发布单编号',
dataIndex: 'name'
},
{
title: '项目',
dataIndex: 'project_name'
},
{
title: '组件',
dataIndex: 'app_name'
},
{
title: '用户',
dataIndex: 'create_user_name'
},
{
title: '更新时间',
dataIndex: 'update_date',
sorter: true,
customRender: (date) =>{ return moment(date).format("YYYY-MM-DD hh:mm")}
},
{
title: '环境',
dataIndex: 'env_name'
},
{
title: '状态',
dataIndex: 'deploy_status_name',
scopedSlots: { customRender: 'deploy_status_name' }
},
{
title: '操作',
scopedSlots: { customRender: 'action' }
}
]
- 可以看到，更新时间,状态,操作都使用了自定义渲染。可以直接写在column中，可以传参数到slot中。
二，table中的template定义
<bf-table
:columns="columns"
:dataSource="dataSource"
rowKey="name"
@change="onChange"
:pagination="{
current: params.currentPage,
pageSize: params.pageSize,
total: total,
showSizeChanger: true,
showLessItems: true,
showQuickJumper: true,
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
}"
>
<template slot="deploy_status_name" slot-scope="{text,record}">
<a-tooltip>
<template slot="title">
{{record.description}}
</template>
<a-tag color='blue' v-if="text==='Ready'">准备就绪</a-tag>
<a-tag color='green' v-if="text==='Success'">部署完成</a-tag>
<a-tag color='orange' v-if="text==='Ongoing'">部署中...</a-tag>
<a-tag color='red' v-if="text==='Failed'">部署异常</a-tag>
</a-tooltip>
</template>
<div slot="action" slot-scope="{text, record}">
<a-button type="primary" @click="goDeploy(record)">部署</a-button>
</div>
</bf-table>
- 模板中对应的slot-scope可以用来传递参数，其中第一个参数是当前字段对应的值progress，第二个参数是当前字段对应的所有值对象,即整个data[n]
三，看看效果
2021-03-01 09_15_17-悬浮球.png
