Vue 컴포넌트를 테이블의 행에 로드하는 방법

VUE.JS / 글쓴이

제 할 일이 적힌 테이블이 있어요.마지막 칸에는 ‘완료’라고 표기하는 버튼이 있습니다.다른 테이블 및 보기에서 이 단추를 다시 사용하고 싶기 때문에 가져오는 구성 요소로 추가했습니다.

또한 다음과 같은 테이블 패키지를 사용하고 싶습니다.vue3-table-lite1) 필터링, 2) 페이지 번호부여, 3) 정렬 기능에 빠르고 쉽게 접근할 수 있도록 합니다.

이러한 패키지는 일반적으로:rows텍스트만 있는 경우 매우 간단합니다.단, 이 경우 Vue 컴포넌트를 제공하는 방법을 모릅니다.<FinishedButton />처음부터<td>아래 마지막 코드 블록에 표시되어 있습니다.

Vue 컴포넌트를 Import하려면 어떻게 해야 합니까?:rows테이블에서요?또는 를 사용하지 않고 필터링, 페이지 번호 매기기 및 정렬을 수행할 수 있습니다.:rows조금도.

버튼 컴포넌트의 구성은 다음과 같습니다.

<template>
<a v-show="todo.is_finishable" v-on:click="markFinished(todo.id)"
class="todo_finished btn btn-sm btn-light btn-light-border finalized_button">Finished</a> </template>
<script>
export default {
name: 'FinishedButton',
props: ['todo',],
methods: {
 remove: function () {

this.$emit("delete", this.todo);
 },

markFinished: function (selected_todo_id) {

this.$http.patch('/api/todo/' + selected_todo_id + "/", {

 status: 'Done'

})

.then(response => {

 console.log(response);

 this.remove();

})

.catch(e => {

 console.log(e);

});

}
},
}; </script>

표의 단순화된 버전은 다음과 같습니다(실제 표에는 더 많은 열이 있습니다).

<table id="FOO" class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="todo in todos" :key="todo.id">
<td>{{ todo.name }}</td>
<td><FinishedButton :todo=todo /></td>
</tr>
</tbody>
</table>


질문에 대한 답변



해당 라이브러리는 잘 모르지만 문서에는 행(열)의 사용자 지정 렌더링을 사용하려는 경우라고 나와 있습니다.v-timeout 모드를 사용해야 합니다.

v-slot이란?기본을 얻으려면 먼저 Vue v-slot 설명서를 숙지해야 합니다.시작하기 위한 훌륭한 리소스입니다.그러나 슬롯은 부모 컴포넌트에서 자녀 컴포넌트로 렌더링하기 위해 자녀 컴포넌트에 “상자”를 남겨두는 방법입니다.소품 같은 거지만, 템플릿 내용.

그것들은 왜 유용한가?많은 사람들이 사용하는 라이브러리를 만들거나 앱 전체에서 컴포넌트를 많이 재사용하는 경우에는 상위 컴포넌트 구현에 “외관”을 맡기는 것이 유용할 수 있습니다.기본 모양도 설정할 수 있습니다.

슬롯 내에는 범위 지정 슬롯의 개념이 있어 상위 컴포넌트가 하위 컴포넌트의 데이터에 액세스해야 하는 문제를 해결합니다.스코프 슬롯은 슬롯 콘센트의 소품입니다.

이제 당면한 문제로 돌아가겠습니다.같은 라이브러리는 아니지만 Vuetify에는 전체 행 또는 특정 열을 나타내는 슬롯이 있는 테이블 구성 요소도 있습니다.즉, item과 item.column-name 슬롯입니다.

사용자 지정 열을 렌더링하는 예는 다음과 같습니다.

<template v-slot:item.column="{ item }">
<MyCustomComponent :data="item" /> </template>

하지만 저는 Vuetify 문서에 적절한 쇼케이스를 남겼습니다.

사용 사례의 경우 사용자 정의 렌더링 열을 가지려면 전체 행의 렌더링을 이어받아야 할 수 있습니다.

자원:



문제없어!이것은 Vue가 DOM을 해석하는 방식과 관련이 있습니다.네이티브 HTML과 커스텀 컴포넌트와의 혼동을 피하기 위해서.‘is’ 특수 특성을 사용하여 동적 구성 요소가 이 네이티브 테이블에서 사용될 수 있음을 Vue에게 알려야 합니다.

<td is="vue:finished-button" :todo="todo"></td>

HTML 태그명은 대소문자를 구분하지 않으므로 그림과 같이 kebab-case를 사용해야 합니다.Vue가 자동으로 백그라운드에서 처리하므로 구성 요소의 이름을 변경할 필요가 없습니다.