Vue.js Ant D 테이블 짜는 법

      <a-table 
        bordered 
        :pagination="false" 
        :scroll="{y : 300}" 
        :columns="editLcInfoTableHeader" 
        :data-source="editLcInfoTableBody"
      >
        <template slot="isUsed">
          <a-checkbox></a-checkbox>
        </template>
        <template slot="temp19">
          <a-checkbox></a-checkbox>
        </template>
      </a-table>

모르는 코드 분석

:scroll="{y : 300}" 세로 스크롤을 생성한다.
:columns="editLcInfoTableHeader" editLcInfoTableHeader에서 컬럼을 가져온다.
해당 코드를 원활하게 사용하기 위해서 import 작업을 진행하였다.
import ELI_T_HEADER from '../../../modules/tableHeader/edit/lc/editLcInformationTableHeader'

const ALIGN_CENTER = "center";

const HEADER = [
    {
        key: 0,
        title: "교차로번호",
        dataIndex: "lcNo",
        align: ALIGN_CENTER,
    },
    {
        key: 21,
        title: "사용여부",
        dataIndex: "isUsed",
        align: ALIGN_CENTER,
        scopedSlots: {customRender: "isUsed"},
    },
    {
        key: 22,
        title: "긴급차량우선신호사용여부",
        dataIndex: "tmep19",
        align: ALIGN_CENTER,
        scopedSlots: {customRender: "temp19"},
    },
];

export default HEADER;

해당 json 파일을 이용해서 테이블을 채워넣었다.

<template slot="isUsed">
  <a-checkbox></a-checkbox>
</template>
<template slot="temp19">
  <a-checkbox></a-checkbox>
</template>

해당 코드들은 체크박스를 사용하기 위해서 사용한 코드이다.

:data-source="editLcInfoTableBody
위에 코드를 사용하기 위해서 테이블에 아래의 구조를 입력해준다.

data() {
    return {
      editLcInfoTableHeader: ELI_T_HEADER,
      editLcInfoTableBody: [
        {
          key: 0,
          lcNo: 1,
          nodeId: 1,
          lcName: "test",
          imporFlag: "MI",
          temp1: 2004,
          lampType: "4색",
          temp3: "없음",
          temp4: "",
          temp5: "",
          deltaLimit: 3,
          transCycle: 3,
          tmep8: "모든에러",
          autoOnline: "수동",
          tmep10: "TCP Client",
          tmep11: "무선",
          tmep12: "10.10.10.10",
          port: 7070,
          tmep14: "",
          saNo: 1,
          saSeq: 1,
          tmep17: "",
          isUsed: true,
          tmep19: false
        },
      ]
    }
  },

더 많은 구조를 사용하는 방법은 사이트를 참고할 수 있다.