ant design table 数据渲染,插槽使用

	<a-table :columns="columns" :dataSource="dataList" :loading="loading" :pagination="false" :rowKey="(record,index) => index">
        <template slot="duty" slot-scope="text, record, index">
            <span v-if="text == 'general'">普通员工</span>
            <span v-if="text == 'expert'">专家</span>
            <span v-if="text == 'admin'">管理员</span>
        </template>
        <template slot="status" slot-scope="text, record, index">
            <span v-if="text == '1'">正常</span>
            <span v-if="text == '0'">失效</span>
        </template>
        <template slot="action" slot-scope="text, record, index">
            <a-button type="primary" size="small" @click="editUser(record)">编辑</a-button>
        </template>
    </a-table>
    
    // script 部分
    
    data(){
            return {
                columns:[
			        {
			            title: '用户账号',
			            dataIndex: 'username',
			        },
			        {
			            title: '姓名',
			            dataIndex: 'name',
			        },
			        {
			            title: '角色',
			            dataIndex: 'duty',
			            scopedSlots: {customRender: 'duty'}
			        },
			        {
			            title: '状态',
			            dataIndex: 'status',
			            scopedSlots: {customRender: 'status'}
			        },
			        {
			            title: '操作',
			            dataIndex: 'action',
			            scopedSlots: {customRender: 'action'},
			        }],
                dataList: [],
                loading: false,
            }
        },
        created(){
            this.getList()
        },
        methods: {
         getList(){
                this.loading = true;
                this.$http.get('/getUsers.do').then(res => {
                    if(res){
                        this.dataList = res || []
                    }
                    this.loading = false;
                }).catch(err => {
                    console.log(err)
                })
            },
            editUser(record){
                this.$refs.addModal.showModal(record)
            },
      	}

1.columns 定义table 表头,以及和 dataList 的字段对应,

2. dataSource 为数据源,是一个数组,

3.loading 加载时loading,数据请求前设置 true,请求完成后设置 false,

4.插槽的使用

很多情况下,后端返回的数据是 数字,前端需要展示文字,这事使用插槽就会非常方便
1.首先,在 columns 中需要的部分添加 scopedSlots: {customRender: ‘status’}
2.table 中添加标签

<template slot="status" slot-scope="text, record, index">
   <span v-if="text == '1'">正常</span>
    <span v-if="text == '0'">失效</span>
</template>

customRender 的值和slot 的值相对应,slot-scope 中 text就是status的值(text可以自定义,key,item都可以), record 代表text所在的对象,可以通过 record 拿到该行的其他值. 比如

editUser(record){
   this.$refs.addModal.showModal(record)
},

把record作为参数传递,编辑改用户信息.