vue.js table组件插入图标

最新推荐文章于 2023-12-11 15:48:28 发布

'马赛克'

最新推荐文章于 2023-12-11 15:48:28 发布

阅读量8.1k

点赞数 1

分类专栏：技术文献文章标签： vue.js table组件插入图标

本文链接：https://blog.csdn.net/weixin_44540436/article/details/102915772

版权

技术文献专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<a-form-item
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="盘点结果">
  <a-table
    bordered
    :columns="columns1"
    size="small"
    :dataSource="inventoryResults" :scroll="{ y: 155 }">
    
    <div  slot="status" slot-scope="text, record">
      <a-icon v-if="record.status == 1" type="exclamation-circle" style="color: red;" />
      <a-icon v-else type="check-circle"  style="color: green;"/>
    </div>
  </a-table>
</a-form-item>

使用插槽：scopedSlots: { customRender: ‘status’ }

export default {
    name: "LookGoodsEditModal",
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        // 表头
        columns1: [
          {
            title: '编码',
            align:"center",
            width: 155,
            dataIndex: 'waresCode'
          },
          {
            title: '名称',
            align:"center",
            width: 60,
            dataIndex: 'waresName'
          },
          {
            title: 'ID',
            width: 90,
            align:"center",
            dataIndex: 'tagId'
          },
          {
            title: '状态',
            width: 60,
            align:"center",
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' },
          }
        ]
        }
      }
    }