前言

尝试使用vue结合antdesign编写前端样式，在使用a-table组件时遇到了一些坑，因此记录下来，以后可以少走弯路。

一、软件版本

vue/cli：4.5.13
vue3
ant design Vue：3.0.0-alpha.14

二、问题

一开始使用官方的的示例代码，发现居然有些地方会报错，只会有部分相关代码，其它有关联的代码不会给出来，所以直接拷代码会达不到官方示例的效果。于是去找别人写的代码，找到了类似下面的代码：

<template>
    <a-table bordered :dataSource="user_list" :columns="columns" rowKey="id" :pagination="false">
        <template slot="sort" slot-scope="text, record,index">{undefined{index+1}}</template>
    </a-table>
</template>
<script>
import { request } from 'network/request.js'
export default {
    data(){
        return {
            user_list: [],
            columns: [
            { title: "序号", 
            scopedSlots: { customRender: "sort" },
            width: 80 },
            {
                title: "姓名",
                dataIndex: "name",
                width: 200
            },
            {
                title: "性别",
                dataIndex: "sex",
                width: 100
            },            
            {
                title: "权限",
                dataIndex: "permission",
                width: 100
            },
            {
                title: "头像",
                dataIndex: "avatar_url",
                width: 100
            },
            {
                title: "操作",
                dataIndex: "operation",
                width: 200
            }]
        }
    },
    mounted(){
        this.get_user_list()
    },
    methods:{
        get_user_list(){
            let config = {
                url: '/user/user_list'
            }
            request(config, '/server').then(res=>{
                this.user_list = res.data.user_list
                // console.log(this.user_list)
            })
        },
    }
 }
</script>

<style>

</style>

但是这样写只能显示默认的内容，想要自定义列内容根本没用，我查了好几篇文章都是这样写的，为什么大家都可以而我写就不行？后来发现应该是版本问题，我用的是vue3，而他们用了vue2或者更低版本的原因。还好后来还是找到了别的方法，直接通过customRender返回要展示的值或者DOM：

<template>
    <a-table bordered :dataSource="user_list" :columns="columns" rowKey="id" :pagination="false">
    </a-table>
</template>

<script>
import { request } from 'network/request.js'
import { message } from 'ant-design-vue';
export default {
    data(){
        return {
            user_list: [],
            columns: [
            { title: "序号", 
            customRender: ({text, index})=>{
                return index+1;
            },
            width: 80 },
            {
                title: "姓名",
                dataIndex: "name",
                width: 200
            },
            {
                title: "性别",
                dataIndex: "sex",
                width: 100
            },            
            {
                title: "权限",
                dataIndex: "permission",
                customRender: ({text, record})=>{
                    return record.permission.name;
                },
                width: 100
            },
            {
                title: "头像",
                dataIndex: "avatar_url",
                customRender: ({text, record})=>{
                    let size = 64
                    let def_avatar = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F08%2F20171208214551_AFQ2h.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641613953&t=30e5ded4ca59f08d53255736ccdd9d4a'
                    return <a-avatar src={record.avatar_url ? record.avatar_url : def_avatar} size={size}></a-avatar>
                },
                width: 100
            },
            {
                title: "操作",
                dataIndex: "operation",
                customRender: ({text, record})=>{
                    return <a href="javascript:void(0)" onClick={()=>this.onDelete(record.name)}>删除</a>
                    // onClick里面必须写回调函数，不然会导致页面挂载的时候直接运行onClick里面的函数
                    // return <a href="javascript:void(0)" onClick={this.onDelete(record.name)}>删除</a>
                },
                width: 200
            }]
        }
    },
    mounted(){
        // 获取用户数据
        this.get_user_list()
    },
    methods:{
        // 获取用户列表
        get_user_list(){
            let config = {
                url: '/user/user_list'
            }
            // 使用封装好的axios请求服务器
            request(config, '/server').then(res=>{
                this.user_list = res.data.user_list
                // console.log(this.user_list)
            })
        },
        // 删除用户
        onDelete(name){
            let con = confirm("确定删除该用户吗？")
            if(con){
                let config = {
                    url: '/user/delete_user?name=' + name
                }
                request(config, '/server').then(res=>{
                    message.success(res.data.msg)
                    setTimeout(()=>{
                        location.reload()
                    }, 1000)
                })
            }
            else{
                console.log("取消了")
            }
        },
    }
 }
</script>

<style>

</style>

效果如下：

问题解决！附上代码地址：fv_project
有什么问题欢迎在评论区留言。