[Vue+BootStrap] b-table에서 특정 컬럼 클릭 시 이벤트 걸기(세부사항 페이지로 이동)

 

 <b-table
      class="mb-6 text-center"
      id="my-table"
      :fields="fields"
      :items="articles"
      :per-page="perPage"
      :current-page="currentPage"
    >
      <template #cell(subject)="data">
        <router-link
          :to="{
            name: 'boardDetail',
            params: { articleno: data.item.articleno },
          }"
          >{{ data.item.subject }}</router-link
        >
      </template>
</b-table>
 
 
 
 
{ key: "articleno", label: "글번호", thClass: "w10" },
{ key: "subject",  label: "제목",   thClass: "w60" },
{ key: "hit", label: "조회수", thClass: "w10" },
{ key: "userid", label: "작성자", thClass: "w10" },
{ key: "regtime", label: "작성일",  thClass: "w10",
formatter: (value, key, item) => {
    return moment(new Date(value)).format("YY.MM.DD");
  },
},

b-table를 사용할 때 필드와 데이터를 태그안에 넣어서 사용하는 방법만 나와서 어떻게 해야할지 열심히 찾아봤다.

그러나 정확하게 내가 원하는 게시글은 못봤는데 template를 사용하는 것을 우연히 발견해서 그걸 응용해서 가능하겠다는생각이 들었다.

b-table안에 template 태그를 선언해주고, 그 안에 내가 원하는 형태의 코드를 작성해준다.

나는 key 값이 subject인 컬럼에만 적용해주고 싶었기 때문에 앞에 #cell(subject)='data'를 작성해줬다.

그리고 이제 router-link 태그를 사용해서 상세 페이지로 이동할 수 있게끔 필요한 코드를 작성해줬다.