zoukankan      html  css  js  c++  java
  • 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',  '10%' },
      { title: '计划日期', dataIndex: 'PlanDate',  '10%' },
      { title: '物料内码', dataIndex: 'MaterialId',  '10%' },
      { title: '物料编码', dataIndex: 'MaterialNumber',  '10%' },
      { title: '物料名称', dataIndex: 'MaterialName',  '10%' },
      { title: '规格型号', dataIndex: 'MaterialSpecification',  '10%' },
      { title: '数量', dataIndex: 'Qty',  '10%' },
      { title: '状态', dataIndex: 'Status',  '10%' },
      { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
    ]

    最后一列操作列,通过

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

     
  • 相关阅读:
    MongoDB
    Mac下将Python2.7改为Python3
    Kafka
    Server 基础概念 备忘
    应用内支付
    Sign in with apple
    Linux三剑客grep/sed/awk
    React-Native中使用到的一些JS特性
    Date Picker控件:
    Picker View控件:
  • 原文地址:https://www.cnblogs.com/czly/p/14639273.html
Copyright © 2011-2022 走看看