在操作列和每行中添加图标 [英] add icons in actions columns and in each row
问题描述
这是一个 vue.js 项目，这个项目是针对一家汽车销售公司的.我有一张桌子，这张桌子包含有关每辆车的信息，如图所示.正如我们注意到的，表格有一个标题，标题下有几行，是每列每辆车的信息的项目.有一个名为Action 的列，在此列中我想放两个图标，第一个是删除，第二个是编辑.请注意，汽车信息的数据来自后端，即 node.js.问题是我没有探索在操作列的每一行上添加删除和编辑按钮.问题是，如何在操作列和每一行上添加删除和修改图标我该怎么做?
ViewAllCars.vue:
<v-app class="bg"><v-容器><v卡class="mx-auto mt-5 pa-3";最大宽度=100%"id=限量产品"；:style="'border: 0px solid #D50000;'";><v-数据表:headers="tableHeaders";:items="loadedCarsGetter";:page.sync="页面";:items-per-page="itemsPerPage";隐藏默认页脚类=海拔1"；@page-count=pageCount = $event";></v-data-table><!-- 分页--><div class="text-center pt-2"><v-pagination v-model="page";:length=pageCount"></v-pagination><v-文本字段:value=itemsPerPage"标签=每页项目数"；类型=数字"min=-1"最大值=15"@input=itemsPerPage = parseInt($event, 10)";类别=pl-7 pr-7"></v-text-field></v-card></v-容器></v-app></模板><脚本>从vuex"导入 { mapGetters };从../../store/types/getters-types"导入GettersTypes；导出默认{数据() {返回 {页数:1，页数:0，每页项目数:10};},创建(){}，计算:{...mapGetters({loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,表头:GettersTypes.GET_HEADERS_TABLE_GETTER}),}};
state内有表头，这些值是在Getter中使用的state.js:
const state = {加载的汽车:[]，报告:[],标题: [{text: "车名",对齐:开始"，可排序:假，值:名称"，类:红色重音-4 白色--文本"，},{ text: "Price", value: "price", class: "red Accent-4 white--text";},{文字:座位数"，值:座位数"，类:红色重音-4 白色--文本"，},{ 文本:日期"，值:日期"，类别:红色重音-4 白色--文本"；},{文字:售价"，价值:售价"，类:红色重音-4 白色--文本"，},{text: "买家姓名",值:买家姓名"，类:红色重音-4 白色--文本"，},{文字:行动"，值:"，类:红色重音-4 白色--文本"，},],};导出默认状态；在 Getter 中，状态被调用，其中包含来自后端的标头和其他信息.getters.js:
从 '../types/getters-types' 导入 GettersTypesconst 吸气剂 = {[GettersTypes.GET_CAR_FORM_GETTER](状态){返回 state.loadedCar;} ,[GettersTypes.GET_HEADERS_TABLE_GETTER](状态){返回 state.headers;}}导出默认吸气剂；首先给 Actions 对象在 header 中赋予一个 value :
const state = {加载的汽车:[]，报告:[],标题: [{text: "车名",对齐:开始"，可排序:假，值:名称"，类:红色重音-4 白色--文本"，},{ text: "Price", value: "price", class: "red Accent-4 white--text"},{文字:座位数"，值:座位数"，类:红色重音-4 白色--文本"，},{ 文本:日期"，值:日期"，类别:红色重音-4 白色--文本"；},{文字:售价"，价值:售价"，类:红色重音-4 白色--文本"，},{text: "买家姓名",值:买家姓名"，类:红色重音-4 白色--文本"，},{文字:行动"，价值:行动"，类:红色重音-4 白色--文本"，},],};导出默认状态；然后在你的 v-data-table 中使用 slots 像这样:
注意 # 是 v-slot 的简写，我假设每辆车在它的对象中有一个 id 你可以传递它要edit 和delete 方法对该车执行正确的操作，您可以传递任何其他您想要的参数，如下所示:item.name
vuetify 在其网站上也有一个很好的例子，请查看以下链接:
This is a vue.js project and this project is for a car sales company. I have a table and this table contains information about each car as in the picture. And as we note that for the table there is a header and there are lines under the head and are the Items which are the information of each car for each column. And there is a column called Action, and within this column I want to put two icons, the first is delete and the second is edit. Note that the data for the car information comes from the backend, which is node.js. The problem is that I did not explore adding the delete and edit buttons on every line in the action column. The question is, how can I add the Delete and Modify icons within the action column and on each line How can I do this?
ViewAllCars.vue:
<template>
<v-app class="bg">
<v-container>
<v-card
class="mx-auto mt-5 pa-3"
max-width="100%"
id="limited-products"
:style="'border: 0px solid #D50000;'"
>
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
@page-count="pageCount = $event"
>
</v-data-table>
<!-- pagination -->
<div class="text-center pt-2">
<v-pagination v-model="page" :length="pageCount"></v-pagination>
<v-text-field
:value="itemsPerPage"
label="Items per page"
type="number"
min="-1"
max="15"
@input="itemsPerPage = parseInt($event, 10)"
class="pl-7 pr-7"
></v-text-field>
</div>
</v-card>
</v-container>
</v-app>
</template>
<script>
import { mapGetters } from "vuex";
import GettersTypes from "../../store/types/getters-types";
export default {
data() {
return {
page: 1,
pageCount: 0,
itemsPerPage: 10
};
},
created() {},
computed: {
...mapGetters({
loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,
tableHeaders: GettersTypes.GET_HEADERS_TABLE_GETTER
}),
}
};
</script>
Within the state there is the header in the table, and these values were used in Getter state.js:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text" },
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "",
class: "red accent-4 white--text",
},
],
};
export default state;
Within Getter, the state was called that contains the header and other information coming from the backend. getters.js:
import GettersTypes from '../types/getters-types'
const getters = {
[GettersTypes.GET_CAR_FORM_GETTER](state) {
return state.loadedCar;
} ,
[GettersTypes.GET_HEADERS_TABLE_GETTER](state){
return state.headers;
}
}
export default getters;
first give a value to Actions object in header:
const state = {
loadedCar: [],
reports: [],
headers: [
{
text: "Car name",
align: "start",
sortable: false,
value: "name",
class: "red accent-4 white--text",
},
{ text: "Price", value: "price", class: "red accent-4 white--text"},
{
text: "Number of Seats",
value: "numberofseats",
class: "red accent-4 white--text",
},
{ text: "Date", value: "date", class: "red accent-4 white--text" },
{
text: "selling price",
value: "sellingprice",
class: "red accent-4 white--text",
},
{
text: "The buyer name",
value: "Thebuyername",
class: "red accent-4 white--text",
},
{
text: "Actions",
value: "actions",
class: "red accent-4 white--text",
},
],
};
export default state;
then use slots in your v-data-table like this:
<v-data-table
:headers="tableHeaders"
:items="loadedCarsGetter"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
@page-count="pageCount = $event"
>
<template #[`item.actions`]="{ item }">
<v-btn icon @click="edit(item.id)>
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn icon @click="delete(item.id)>
<v-icon>mdi-delete</v-icon>
</v-btn>
</template>
</v-data-table>
notice that # is shorthand for v-slot and I assumed that each car has an id in its object that you can pass that to edit and delete methods to perform the proper action on that car, you can pass any other argument you want like this: item.name
also vuetify has a good example on its site, check the link below:
vuetify data table CRUD actions example
这篇关于在操作列和每行中添加图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
