将 vuetify simple-table 更改为 data-table
Change vuetify simple-table to data-table
我在 Vuetify 中有这个简单的 table,没有 headers,只有一列。如何将其更改为 vuetify v-data-table
?
<v-simple-table>
<thead />
<tbody>
<tr
v-for="item in categories"
:key="item"
@click="handleClick"
>
<td>{{ item }}</td>
<v-switch />
</tr>
</tbody>
</v-simple-table>
categories
是一个简单的字符串数组。我想将其更改为 data-table 以便更好地处理单击和选择行。
你可以这样改:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
categoryList: ['Category 1', 'Category 2', 'Category 3'],
}),
computed: {
categoriesHeader() {
return [
{ text: "Name", value: "name" }
];
},
},
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.0/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="a">
<v-data-table :headers="categoriesHeader" :items="categoryList" item-key="id" class="elevation-1">
<template v-slot:[`item.name`]="{ item }">
{{ item }}
</template>
</v-data-table>
</v-app>
</div>
检查我制作的这个codesandbox:https://codesandbox.io/s/stack-71617004-simple-to-v-data-table-bm2yn1?file=/src/components/Example.vue
使用正文插槽
您可以使用数据 table 的 body
插槽,并像这样使用与简单 table 中几乎相同的代码。这样您就可以在 tr
:
中设置 handleClick 函数
<v-data-table
:headers="headers"
:items="items"
hide-default-footer
hide-default-header
:items-per-page="-1"
:footer-props="{
itemsPerPageOptions: [-1],
}"
>
<template v-slot:body="{ items}">
<tbody>
<tr v-for="item in items" :key="item" @click="handleClick(item)">
<td align="left">{{item}}</td>
</tr>
</tbody>
</template>
</v-data-table>
正在使用物品栏位
或者您可以像这样使用 item
插槽。换句话说,使用数据 table.
的 @click:row
事件配置 handleClick 函数
如果您尝试将 item
槽与您的字符串数组一起使用,它会起作用,但您会在控制台中收到一些警告。告诉您您的 data-table 项目槽需要一个对象并收到一个字符串。那是因为 v-data-table
组件需要接收一个对象数组。
为避免此警告,您只需使用 Array.prototype.map 将字符串数组转换为虚拟对象数组,然后绑定计算的 属性。
computed: {
myItemsTransformed() {
return this.items.map(item => ({ name: item }));
}
},
<v-data-table
:headers="headers"
:items="myItemsTransformed"
hide-default-footer
hide-default-header
:items-per-page="-1"
:footer-props="{
itemsPerPageOptions: [-1],
}"
@click:row="(item) => handleClick(item.name)"
>
<template #item.name="{ item }">
{{ item.name }}
</template>
</v-data-table>
请注意,在这两个示例中,我都使用了属性 hide-default-footer
、hide-default-header
来隐藏数据的页脚和页眉 table 并将 items-per-page
设置为-1
。显示 table 的所有项目并避免分页。
我在 Vuetify 中有这个简单的 table,没有 headers,只有一列。如何将其更改为 vuetify v-data-table
?
<v-simple-table>
<thead />
<tbody>
<tr
v-for="item in categories"
:key="item"
@click="handleClick"
>
<td>{{ item }}</td>
<v-switch />
</tr>
</tbody>
</v-simple-table>
categories
是一个简单的字符串数组。我想将其更改为 data-table 以便更好地处理单击和选择行。
你可以这样改:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
categoryList: ['Category 1', 'Category 2', 'Category 3'],
}),
computed: {
categoriesHeader() {
return [
{ text: "Name", value: "name" }
];
},
},
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.5.0/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app id="a">
<v-data-table :headers="categoriesHeader" :items="categoryList" item-key="id" class="elevation-1">
<template v-slot:[`item.name`]="{ item }">
{{ item }}
</template>
</v-data-table>
</v-app>
</div>
检查我制作的这个codesandbox:https://codesandbox.io/s/stack-71617004-simple-to-v-data-table-bm2yn1?file=/src/components/Example.vue
使用正文插槽
您可以使用数据 table 的 body
插槽,并像这样使用与简单 table 中几乎相同的代码。这样您就可以在 tr
:
<v-data-table
:headers="headers"
:items="items"
hide-default-footer
hide-default-header
:items-per-page="-1"
:footer-props="{
itemsPerPageOptions: [-1],
}"
>
<template v-slot:body="{ items}">
<tbody>
<tr v-for="item in items" :key="item" @click="handleClick(item)">
<td align="left">{{item}}</td>
</tr>
</tbody>
</template>
</v-data-table>
正在使用物品栏位
或者您可以像这样使用 item
插槽。换句话说,使用数据 table.
@click:row
事件配置 handleClick 函数
如果您尝试将 item
槽与您的字符串数组一起使用,它会起作用,但您会在控制台中收到一些警告。告诉您您的 data-table 项目槽需要一个对象并收到一个字符串。那是因为 v-data-table
组件需要接收一个对象数组。
为避免此警告,您只需使用 Array.prototype.map 将字符串数组转换为虚拟对象数组,然后绑定计算的 属性。
computed: {
myItemsTransformed() {
return this.items.map(item => ({ name: item }));
}
},
<v-data-table
:headers="headers"
:items="myItemsTransformed"
hide-default-footer
hide-default-header
:items-per-page="-1"
:footer-props="{
itemsPerPageOptions: [-1],
}"
@click:row="(item) => handleClick(item.name)"
>
<template #item.name="{ item }">
{{ item.name }}
</template>
</v-data-table>
请注意,在这两个示例中,我都使用了属性 hide-default-footer
、hide-default-header
来隐藏数据的页脚和页眉 table 并将 items-per-page
设置为-1
。显示 table 的所有项目并避免分页。