ant design vue 使用小结

a-table

columns配置

常见三种方式

1.直接回显dataIndex就是参数名

2.customRender 对值进行简单的处理

3.scopedSlots 对值进行复杂处理获取操作列表

               {title: '利率',dataIndex: 'customerPrice',customRender: (text) => text * 100 + '%'},{title: '授权到期时间',dataIndex: 'authEndTime'},{title: '融资状态',dataIndex: 'canFinance',scopedSlots: { customRender: 'canFinanceStatus' }},

• text：通常是指当前插槽所代表的数据项的文本内容。
• record：是一个对象，包含了当前行的所有数据。

第三种情况详写1.状态处理 <a-table><span slot="canFinanceStatus" slot-scope="text"><a-badge :status="text | canFinanceStatus" :text="text | canFinanceText" /></span></a-table>const statusMap = {0: {status: 'default',text: '暂停'},1: {status: 'processing',text: '开始'}}filters: {canFinanceText(type) {return statusMap[type].text},canFinanceStatus(type) {return statusMap[type].status}}

2.操作列表页面{title: '操作',dataIndex: 'operation',scopedSlots: { customRender: 'operation' }}配置<template slot="action" slot-scope="text, record"><a-dropdown><a class="ant-dropdown-link" @click.prevent>更多<a-icon type="down" /></a><template #overlay><a-menu @click="onClickBtn(record, $event)"><a-menu-item key="1">上传担保协议</a-menu-item><a-menu-item key="2" v-if="record.signStatus == 0">协议签署 </a-menu-item></a-menu></template></a-dropdown></template>

 示例图

 a-spin

即全局loading