ant design vue中，表格的自定义scopedSlots渲染

今天开发当中使用到的知识点。在将后端的列表数据，显示到前端的表格中时，如果要自定义一些显示网格，应该如何传参数和自定义渲染呢？

一，columns的定义

const columns = [
  {
    title: '发布单编号',
    dataIndex: 'name'
  },
  {
    title: '项目',
    dataIndex: 'project_name'
  },
  {
    title: '组件',
    dataIndex: 'app_name'
  },
  {
    title: '用户',
    dataIndex: 'create_user_name'
  },
  {
    title: '更新时间',
    dataIndex: 'update_date',
    sorter: true,
    customRender: (date) =>{ return moment(date).format("YYYY-MM-DD hh:mm")}
  },
  {
    title: '环境',
    dataIndex: 'env_name'
  },
  {
    title: '状态',
    dataIndex: 'deploy_status_name',
    scopedSlots: { customRender: 'deploy_status_name' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

• 可以看到，更新时间,状态,操作都使用了自定义渲染。可以直接写在column中，可以传参数到slot中。

二，table中的template定义

        
        

          部署
        
      

• 模板中对应的slot-scope可以用来传递参数，其中第一个参数是当前字段对应的值progress，第二个参数是当前字段对应的所有值对象,即整个data[n]

三，看看效果

2021-03-01 09_15_17-悬浮球.png

四，参考URL

https://www.zhangshengrong.com/p/QrXebDZL1d/