如何在 ant 的table中实现图片的渲染

Posted 2021-03-11 eternityz

<a-table rowKey="id"
         :dataSource="bookDataSource"
         :columns="columns"
         :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,columnTitle: columnTitle}"
         :pagination="false">

  <template slot="operation"
            slot-scope="text, record">
    <a-popconfirm v-if="bookDataSource.length"
                  title="确定删除该记录吗?"
                  @confirm="() => onDelete(record.id)">
      <a href="javascript:;">移除</a>
    </a-popconfirm>
  </template>
</a-table>

data () {
    return {
      columnTitle: ‘是否必选‘,
      selectedRowKeys: [],
      bookDataSource: [],
      columns: [
        {
          title: ‘商品名称‘,
          width: ‘30%‘,
          align: "center",
          dataIndex: ‘bookName‘,
        },
        {
          title: ‘商品图片‘,
          align: "center",
          width: ‘30%‘,
          dataIndex: ‘bookImg‘,
          customRender: (text, row, index) => {
            return <img src={text} style={{ width: ‘50px‘, height: ‘50px‘, borderRadius: ‘1–0%‘ }}></img>;
          }
        },
        {
          title: ‘价格‘,
          align: "center",
          width: ‘15%‘,
          dataIndex: ‘listPrice‘,
        },
        {
          title: ‘操作‘,
          dataIndex: ‘operation‘,
          align: "center",
          width: ‘12%‘,
          scopedSlots: { customRender: ‘operation‘ },
        }],
}

在columns中进行进一步处理