我有一張表列出我的待辦事項。在最后一欄中，我有一個按鈕可以將待辦事項標記為已完成。因為我想在其他表和視圖中重復使用這個按鈕，所以我將它添加為要匯入的組件。
此外，我想使用一個表格包，vue3-table-lite這樣我就可以快速輕松地訪問 1) 過濾、2) 分頁和 3) 排序功能。
這些包通常使用:rows，如果您只有文本，這非常簡單。但是，我不知道如何提供 Vue 組件，在這種情況下<FinishedButton />，從<td>下面最后一個代碼塊中顯示的最后一個開始。
如何將 Vue 組件匯入到:rows表中？或者完全不用使用就可以實作過濾、分頁和排序:rows。
下面是按鈕組件的構造方式：
<template>
<a v-show="todo.is_finishable" v-on:click="markFinished(todo.id)"
>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" >
<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>
uj5u.com熱心網友回復：
雖然我不熟悉那個特定的庫，但它的檔案指出，如果你想使用自定義呈現行（列？）你應該使用v-slot mode。
什么是V槽？要獲得基礎知識，您可能應該首先熟悉 Vue v-slot 檔案。這是一個很好的入門資源。但是，tldr，插槽是一種在子組件中留下“盒子”的方式，以便從父組件中將“東西”渲染到它們中。像道具，但用于模板內容。
為什么它們有用？好吧，如果您正在創建一個很多人使用的庫，或者如果您在整個應用程式中大量重用組件，您可能會發現將“外觀”留給父組件實作很有用。您還可以設定默認外觀。
在插槽中，有一個作用域插槽的概念，它解決了父組件需要從子組件訪問資料的問題。Scoped 插槽是您的插槽插座的道具。
現在，回到手頭的問題。雖然它不是同一個庫，但 Vuetify 也有一個表格組件，其中的插槽代表整行或特定列。即分別為item和item.column-name插槽。
呈現自定義列的示例如下所示
<template v-slot:item.column="{ item }">
<MyCustomComponent :data="item" />
</template>
但是我給 Vuetify 檔案留下了一個適當的展示。
對于您的用例，如果您想要自定義呈現的列，您可能需要接管整行的呈現。
資源：
- https://vue3-lite-table.vercel.app/usage#slotMode
- https://vuejs.org/guide/components/slots.html
- https://vuetifyjs.com/en/api/v-data-table/#slots-item
- https://vuetifyjs.com/en/components/data-tables/#item
uj5u.com熱心網友回復：
沒問題！這與 Vue 決議 DOM 的方式有關。為了避免與原生 HTML 與自定義組件混淆。你需要告訴 Vue，你的動態組件可以使用 'is' 特殊屬性在這個原生表中使用。
<td is="vue:finished-button" :todo="todo"></td>
請注意，您必須使用所示的 kebab-case，因為 HTML 標記名稱不區分大小寫。您無需重命名組件，因為 Vue 會在后臺自動處理。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/522430.html