antd-vue中表格的使用

效果图：

一，基本的使用

代码：

        {{index+1}}

        

          

        

        

          删除

        

      

js：

data() {

    return {

 columns: [

        { title: "序号", scopedSlots: { customRender: "sort" }, width: 80 },

        {

          title: "姓名",

          dataIndex: "userName",

          width: 200

        },

        {

          title: "用户id",

          dataIndex: "id",

          width: 100

        },

        {

          title: "性别",

          dataIndex: "sex",

          width: 100

        },

        {

          title: "手机号码",

          dataIndex: "mobile",

          width: 300

        },

        {

          title: "openid",

          dataIndex: "openid",

          width: 300

        },

        {

          title: "头像",

          dataIndex: "avatarUrl",

          scopedSlots: { customRender: "avatar" },

          width: 100

        },

        {

          title: "操作",

          dataIndex: "operation",

          scopedSlots: { customRender: "operation" },

          width: 200

        }

      ]

名称解释：bordered 显示表格边框 ，:dataSource 表格的数据（数组格式,在data中），:columns 表格的列目，（在data中），

rowKey 设置表格的每行的key值 不设置会报错，（设置为id，是因为我的userList中每个数据都有id值）:pagination设置分页信息（false，不显示分页）

二，功能解释

1，表格的序号递增

{{index+1}}

使用的slot的值要与columns中的 scopedSlots: { customRender: "sort" }中的对应， slot-scope中的 text和record都是可以获取这一行的数据，实现序号递增只需要index+1即可（index从0开始）。

2，在表格中插入数据

 

          

        

也是使用 slot方法，通过record获取到这行数据中的图片地址

3，实现事件操作

如：删除，查看详情等 需要表格中的数据的事件操作

 

          删除

        

在methods:{

 onDelete(val) {

      console.log("del", val);

    },

使用slot方法，使用record拿到数据进行操作

 

微信小程序【My简历】有需要的可以了解一下：张三的简历