vue 如何动态增加 删除 修改 显示与不显示 表格header字段 并与tbody 数据对应隐藏一列

要实现表格header字段的动态增加、删除、修改以及显示与不显示，并且与tbody中的数据对应隐藏一列，你可以使用Vue中的数据绑定和条件渲染的方式来实现。

这里我们假设你有一个包含表格数据的数组，每个数据对象包含了与表格header字段对应的属性。

动态增加、删除和修改header字段：
你可以通过操作一个数组来动态增加、删除和修改header字段，并且使用该数组和tbody中的数据进行双向绑定。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(field, index) in fields" :key="field">
            <input v-model="field" @input="updateField(index)">
            <button @click="deleteField(index)">删除</button>
          </th>
          <th>
            <button @click="addField">新增字段</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-for="field in fields" :key="field">{{ item[field] }}</td>
          <td>
            <!-- 这是隐藏的一列 -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ['字段1', '字段2', '字段3'],
      data: [
        { id: 1, 字段1: '值1', 字段2: '值2', 字段3: '值3' },
        { id: 2, 字段1: '值4', 字段2: '值5', 字段3: '值6' }
      ]
    };
  },
  methods: {
    addField() {
      this.fields.push('新字段');
      this.data.forEach((item) => {
        item['新字段'] = ''; // 在数据对象中添加新字段的初始值
      });
    },
    deleteField(index) {
      const deletedField = this.fields.splice(index, 1)[0];
      this.data.forEach((item) => {
        delete item[deletedField]; // 删除数据对象中对应的字段
      });
    },
    updateField(index) {
      // 数据已经在fields数组中进行了修改
    }
  }
}
</script>

上述代码中，我们通过操作`fields`数组来实现header字段的动态增加、删除和修改。每当新增或删除字段时，我们也相应地更新了每个数据对象中的属性。

显示与不显示header字段并与tbody数据对应隐藏一列：
你可以使用Vue的条件渲染指令`v-if`或`v-show`来实现显示与不显示header字段，并根据需要在tbody中隐藏对应的列。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(field, index) in fields" :key="field" v-show="shouldShowField(index)">
            <input v-model="field" @input="updateField(index)">
            <button @click="deleteField(index)">删除</button>
          </th>
          <th>
            <button @click="addField">新增字段</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-for="(field, index) in fields" :key="field" v-show="shouldShowField(index)">{{ item[field] }}</td>
          <td>
            <!-- 这是隐藏的一列 -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: ['字段1', '字段2', '字段3'],
      data: [
        { id: 1, 字段1: '值1', 字段2: '值2', 字段3: '值3' },
        { id: 2, 字段1: '值4', 字段2: '值5', 字段3: '值6' }
      ],
      showFields: [true, true, true] // 控制每个字段是否显示的数组
    };
  },
  methods: {
    addField() {
      this.fields.push('新字段');
      this.data.forEach((item) => {
        item['新字段'] = ''; // 在数据对象中添加新字段的初始值
      });
      this.showFields.push(true);
    },
    deleteField(index) {
      const deletedField = this.fields.splice(index, 1)[0];
      this.data.forEach((item) => {
        delete item[deletedField]; // 删除数据对象中对应的字段
      });
      this.showFields.splice(index, 1);
    },
    updateField(index) {
      // 数据已经在fields数组中进行了修改
    },
    shouldShowField(index) {
      return this.showFields[index];
    }
  }
}
</script>

上述代码中，我们使用`showFields`数组来控制每个字段是否应该显示。根据`showFields`数组的值来决定每个字段的显示与隐藏，并在tbody中的对应列使用相同的条件渲染。

希望以上解答能够帮助到你！如果你还有其他问题，请继续提问。