antd Vue 表格中写图片和按钮该怎么写

官方给出的解释是

直接上代码

<a-table :columns="columns" :data-source="data" rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
              //这一行中的 slot-scope 是用来匹配下边 columns 中的 scopedSlots
            <template slot="img" slot-scope="text, record">
              <img :src="record.img[0]" alt="" :style="{width:'100px'}">
            </template>
            
            <template slot="status" slot-scope="record">
              <a-switch :checked="record" @change="onChange" />
            </template>
            
            <span slot="action" slot-scope="">
                <button>编辑</button>
                <button>删除</button>
            </span>
        </a-table>
        
<script>
const columns = [
  {
    dataIndex: 'id',
    key: 'id',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'id' },
  },
  {
    title: 'comment',
    dataIndex: 'comment',
  },
  {
    title: 'img',
    dataIndex: 'img',
    scopedSlots: { customRender: 'img' },
  },
  {
    title: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },

  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
</script>

总结

在需要添加元素的属性下添加 scopedSlots: { customRender: 'action' }, 在上方表格中写相对应的元素就好了