时间戳

首页 > 解决方案 > 在 Vuetify 数据表列上应用自定义类

vue.js - 在 Vuetify 数据表列上应用自定义类

问题描述

我Vuetify在我的项目中使用。我的问题是，有没有办法在Vuetify 数据表列上应用自定义类？我实际上想将这些特定列隐藏在print.

data() {
    return {
      salaryId: "",
      search: "",
      paymentModal: false,
      paymentsModal: false,
      editModal: false,
      headers: [
        { text: "S#", value: "sno" },
        { text: "Staff Type", value: "staff_type" },
        { text: "Month", value: "month" },
        { text: "Salary", value: "amount" },
        { text: "Paid", value: "paid" },
        { text: "Balance", value: "balance" },
        { text: "Status", value: "status" },
        { text: "Pay Salary", value: "pay_salary" }, // this should not be in print
        { text: "Payments", value: "payments" },   // this should not be in print
        { text: "Actions", value: "actions" }  // this should not be in print
      ]
    };
  }

标签： vue.jsvuetify.js

解决方案

您可以使用标头属性向标头添加自定义类：

headers: [{ text: "Pay Salary", value: "pay_salary", class: 'custom-class' }]

并使用插槽为每个单元格添加一个类

<v-data-table
  :headers="headers"
  :items="desserts"
>
  <template v-slot:item="{ item }">
    <tr>
      <td class="custom-class">{{ item.name }}</td>
      <td class="custom-class">{{ item.age }}</td>
      <td class="custom-class">{{ item.country }}</td>
    </tr>
  </template>
</v-data-table>

https://vuetifyjs.com/en/components/data-tables/#data-tables

为了隐藏一列，我知道两种解决方案：

  1. 过滤标头数组。随机示例：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    hideColumns: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Country', value: 'country' },
      ],
      desserts: [
        { name: 'Lee', age: 45, country: 'EUA' },
        { name: 'Lin', age: 85, country: 'Japan' },
      ],
    }
  },
  computed: {
    newHeaders() {
      return this.headers.filter(({ value }) => !this.hideColumns.includes(value));
    },
  },
})
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="newHeaders"
      :items="desserts"
    ></v-data-table>
  </v-app>
</div>

  1. 使用引导类：

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

推荐阅读