antdesign最基本的表格

1.先看样子

image.png

2.组件代码

        <a-table class="tableDesign"
                 :rowKey="record => record.examDesignId"
                 :columns="markingTable"
                 :dataSource="finishTrains"
                 :pagination="false"
        >
          <!--训练时长-->
          <span slot="trainingTime" slot-scope="text, record">
          <span>{{getTimeDuration(record.beginTime,record.endTime)}}</span>
        </span>
          <!--操作-->
          <span slot="tags" slot-scope="text, record">
          <template>
            <a-icon
              type="search"
              class="table-options color-green table-icons"
              title="查看"
              @click="searchExamInfo(record)"
            ></a-icon>&nbsp;
          </template>
          </span>
        </a-table>

let markingTable = [
  {title: '考核训练名称', dataIndex: 'trainingTitleName', align: 'center'},
  {title: '开始时间', dataIndex: 'beginTime', align: 'center', scopedSlots: {customRender: 'beginTime'}},
  {title: '考核训练时长', dataIndex: 'timeList', align: 'center', scopedSlots: {customRender: 'trainingTime'}},
  // {title: '依照规划', dataIndex: 'trainingPlanEntity', align: 'center', scopedSlots: {customRender: 'design'}},
  // {title: '监考人', dataIndex: 'supervisorsEntity', align: 'center', scopedSlots: {customRender: 'invigilator'}},
  {title: '操作', scopedSlots: {customRender: 'tags'}, align: 'center', key: 'tags'},
]

export {markingTable}

3.理解

image.png