vue ant design vue中表格设置编辑列

<a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="true"
      size="small"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record.Id)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleDelete([record.Id])">删除</a>
        </template>
      </span>
    </a-table>
const columns = [
  { title: '工单号', dataIndex: 'BillNo', width: '10%' },
  { title: '计划日期', dataIndex: 'PlanDate', width: '10%' },
  { title: '物料内码', dataIndex: 'MaterialId', width: '10%' },
  { title: '物料编码', dataIndex: 'MaterialNumber', width: '10%' },
  { title: '物料名称', dataIndex: 'MaterialName', width: '10%' },
  { title: '规格型号', dataIndex: 'MaterialSpecification', width: '10%' },
  { title: '数量', dataIndex: 'Qty', width: '10%' },
  { title: '状态', dataIndex: 'Status', width: '10%' },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
]

最后一列操作列,通过

scopedSlots: { customRender: 'action' }调用插槽模板

 

 

 
posted @ 2021-04-09 23:27  liuyong111  阅读(3218)  评论(0编辑  收藏  举报