table表格数据渲染

需求：打开页面时，加载table表格数据
html部分代码如下：

<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
	<div slot="operator" slot-scope="text">{{ text.content1 }}</div>
	<div slot="billNo" slot-scope="text">{{ text.content2 }}</div>
	<div slot="containerType" slot-scope="text">{{ text.content3 }}</div>
	<div slot="reason" slot-scope="text">{{ text.content4 }}</div>
	<div slot="startTime" slot-scope="text">{{ text.content5 }}</div>
	<div slot="endTime" slot-scope="text">{{ text.content6 }}</div>
	<div slot="creater" slot-scope="text">{{ text.content7 }}</div>
	<div slot="state" slot-scope="text">{{ text.content8 }}</div>
	<div slot="action" slot-scope="text, record, index">
	  <a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
	  <a @click="delRecord(record, index)" class="color-error">作废</a>
	</div>
</a-table>

js部分代码如下：

<script>
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      form: {
        containerOperator: ''
      },
      containerOperatorList: '',
      planStatusList: '',
      //  table标题
      columns: [
        {
          title: '箱经营人',
          dataIndex: 'operator', // slot名称与dataIndex的值一致
          scopedSlots: { customRender: 'operator' },
          align: 'center'
        },
        {
          title: '提单号',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'billNo' },
          align: 'center'
        },
        {
          title: '箱型箱类',
          dataIndex: 'containerType',
          scopedSlots: { customRender: 'containerType' },
          align: 'center'
        },
        {
          title: '拒发原因',
          dataIndex: 'reason',
          scopedSlots: { customRender: 'reason' },
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          scopedSlots: { customRender: 'startTime' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          scopedSlots: { customRender: 'endTime' },
          align: 'center'
        },
        {
          title: '创建人',
          dataIndex: 'creater',
          scopedSlots: { customRender: 'creater' },
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' },
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: '120px'
        }
      ],
      // table数据
      data: []
    }
  },
  created() {
    // const param = this.form
    // 加载页面时调用此函数
    this.getReturnInfo()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            operator: record.operator
          }
        })
      }
    }
  },
  methods: {
     // 获取table表格的数据
    getReturnInfo(param) {
     // 模拟数据
      const items = [
        {
          item1: '马士基1',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基2',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        },
        {
          item1: '马士基3',
          item2: '581209708',
          item3: '40`HC',
          item4: '船公司通知SOC拒发',
          item5: '2019-12-18 08:59',
          item6: '2022-09-22 14:00',
          item7: '刘女士',
          item8: '有效'
        }
      ]
      const dataTable = []
      items.forEach((item, index) => {
        const data = {
          key: index,
          operator: {  // operator是dataIndex的值
            content1: item.item1
          },
          billNo: {
            content2: item.item2
          },
          containerType: {
            content3: item.item3
          },
          reason: {
            content4: item.item4
          },
          startTime: {
            content5: item.item5
          },
          endTime: {
            content6: item.item6
          },
          creater: {
            content7: item.item7
          },
          state: {
            content8: item.item8
          }
        }
        dataTable.push(data)
      })
      // 将数据赋值给页面
      this.data = dataTable
    }
  }
}
</script>

css部分代码如下：

<style lang="less" scoped>
	.color-error {
		color: #ff4d4f;
	}
	.color-success {
		color: #4cd964;
	}
	.margin-right10 {
		margin-right: 10px;
	}
	.margin-right15 {
		margin-right: 15px;
	}
	.ant-form-item {
		margin-bottom: 4px;
	}
</style>

最终效果如图所示：