table表格数据渲染

需求：打开页面时，加载table表格数据

建议：当表格中的某些列需要加特殊样式或者特殊处理时，用此方式

html部分代码如下：

<a-table :row-selection="rowSelection" :columns="columns" :data-source="data">
	<div slot="aa" slot-scope="text">{{ text.content1 }}</div>
	<div slot="A" slot-scope="text">{{ text.content2 }}</div>
	<div slot="B" slot-scope="text">{{ text.content3 }}</div>
	<div slot="ee" slot-scope="text">{{ text.content4 }}</div>
	<div slot="start" slot-scope="text">{{ text.content5 }}</div>
	<div slot="end" 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: 'aa' },
          align: 'center'
        },
        {
          title: '提单号',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'A' },
          align: 'center'
        },
        {
          title: '箱型箱类',
          dataIndex: 'containerType',
          scopedSlots: { customRender: 'B' },
          align: 'center'
        },
        {
          title: '拒发原因',
          dataIndex: 'reason',
          scopedSlots: { customRender: 'ee' },
          align: 'center'
        },
        {
          title: '开始时间',
          dataIndex: 'startTime',
          scopedSlots: { customRender: 'start' },
          align: 'center'
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          scopedSlots: { customRender: 'end' },
          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>

最终效果如图所示：

表格数据正常渲染

html部分代码如下所示：

<a-table :columns="columns" :data-source="data" :pagination="pagination" @change="handleChangeTable">
	<span slot="action" slot-scope="text, record, index" style="width:150px">
		<a @click="reviseRecord(record, index)" class="margin-right15">修改</a>
		<a @click="delRecord(record, index)" class="color-error">作废</a>
	 </span>
</a-table>

js部分代码如下所示：

<script>
export default {
	data() {
		return {
			columns: [
	        {
	          title: '部件代码',
	          dataIndex: 'partCode',
	          align: 'center'
	        },
	        {
	          title: '部件描述',
	          dataIndex: 'partInfo',
	          align: 'center'
	        },
	        {
	          title: '位置代码',
	          dataIndex: 'locationCode',
	          align: 'center'
	        },
	        {
	          title: '修理代码',
	          dataIndex: 'repairCode',
	          align: 'center'
	        },
	        {
	          title: '修理描述',
	          dataIndex: 'repairDepict',
	          align: 'center'
	        },
	        {
	          title: '箱型箱类',
	          dataIndex: 'containerType',
	          align: 'center'
	        },
	        {
	          title: '客户报价',
	          dataIndex: 'clientQuote',
	          align: 'center'
	        },
	        {
	          title: '客户工时单价/币制',
	          dataIndex: 'workPrice',
	          align: 'center'
	        },
	        {
	          title: '操作',
	          dataIndex: 'action',
	          scopedSlots: { customRender: 'action' },
	          align: 'center'
	        }
	      ]
		}
	}，
	created() {
		// 加载页面时调用此函数
		this.getCodeInfo()
	},
	methods: {
		//  获取table表格的数据
	    getCodeInfo() {
	      const items = [
	        {
	          partCode: '0001',
	          partInfo: '01',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/¥'
	        },
	        {
	          partCode: '0002',
	          partInfo: '02',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/人民币'
	        },
	        {
	          partCode: '0003',
	          partInfo: '03',
	          locationCode: '0.5H',
	          repairCode: '80',
	          repairDepict: '1111',
	          containerType: '40`GH',
	          clientQuote: '真实',
	          workPrice: '40/人民币'
	        }
	      ]
	      const dataTable = []
	      items.forEach((item, index) => {
	        const data = {
	          key: index,
	          partCode: item.partCode,
	          partInfo: item.partInfo,
	          locationCode: item.locationCode,
	          repairCode: item.repairCode,
	          repairDepict: item.repairDepict,
	          containerType: item.containerType,
	          clientQuote: item.clientQuote,
	          workPrice: item.workPrice
	        }
	        dataTable.push(data)
	      })
	      // 将数据赋值给页面
	      this.data = dataTable
	    }
	}
}
</script>

最终效果如图：