使用vuetify data table动态显示/隐藏vue中的表列

<template>
  <v-data-table
    :headers="headers"
    :items="items"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' },
        { text: '性别', value: 'gender' },
      ],
      items: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
    };
  },
};
</script>

<template>
  <v-data-table
    :headers="headers"
    :items="items"
  >
    <template v-slot:header="{ headers }">
      <tr>
        <th v-for="header in headers" :key="header.text">
          <v-checkbox
            v-model="header.visible"
            hide-details
          ></v-checkbox>
          {{ header.text }}
        </th>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '姓名', value: 'name', visible: true },
        { text: '年龄', value: 'age', visible: true },
        { text: '性别', value: 'gender', visible: true },
      ],
      items: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
    };
  },
  methods: {
    filterVisibleColumns() {
      return this.headers.filter((header) => header.visible);
    },
  },
};
</script>

<template>
  <v-data-table
    :headers="filterVisibleColumns()"
    :items="items"
  >
    <!-- ... -->
  </v-data-table>
</template>