码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-07 11:03:50      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:code   style   slots   src   table   img   rip   opera   商品   

<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中进行进一步处理

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

标签:code   style   slots   src   table   img   rip   opera   商品   

原文地址:https://www.cnblogs.com/eternityz/p/12271906.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!