How do I write pictures and buttons in antD Vue table

The official explanation is

Direct code

<a-table :columns="columns" :data-source="data" rowKey="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
       >
              // in this line, slot-scope matches scopedSlots in the columns below
            <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>The editor</button>
                <button>delete</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>
Copy the code

conclusion

Add scopedSlots: {customRender: ‘action’} under the attribute that you want to add the element, and write the corresponding element in the top table