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