在操作列和每行中添加图标

Question

​

这是一个vue.js项目，这个项目是为一家汽车销售公司。我有一个表格，这个表格包含了每辆车的信息，如图所示。正如我们注意到的，对于表格，有一个标题，在标题下有几行，是每列中每辆车的信息。有一个名为Action的列，我想在该列中放置两个图标，第一个是删除，第二个是编辑。请注意，汽车信息的数据来自后台，即node.js。问题是，我没有探索在操作列的每一行上添加删除和编辑按钮。问题是，如何在操作列中添加Delete和Modify图标，以及如何在每一行添加该图标？

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>

在状态中，表中有标头，在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;

在Getter中，调用的状态包含来自后端的头部和其他信息。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;

Answer 1

首先在header中给出一个Actions对象的value：

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;

然后在v-data-table中使用slots，如下所示：

 <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>

注意，#是v-slot的缩写，我假设每辆汽车的对象中都有一个id，您可以将其传递给edit和delete方法，以便对该汽车执行适当的操作，您可以像这样传递任何其他参数：item.name

vuetify在其网站上也有一个很好的例子，请查看下面的链接：

vuetify data table CRUD actions example