vue实现动态控制表格列的显示隐藏

实现动态控制表格列的显示隐藏是一个常见的需求，通常可以通过使用Vue.js来实现。下面是一个完整的攻略：

步骤一：通过v-if指令动态控制表格列的显示隐藏。

v-if指令可以根据条件来控制一个元素是否显示。我们可以根据用户选择来动态的添加或删除表格的列。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th v-if="showAge">年龄</th>
        <th v-if="showGender">性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in userList" :key="index">
        <td>{{ item.name }}</td>
        <td v-if="showAge">{{ item.age }}</td>
        <td v-if="showGender">{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      userList: [
        { name: "张三", age: 25, gender: "男" },
        { name: "李四", age: 30, gender: "女" },
        { name: "王五", age: 28, gender: "男" }
      ],
      showAge: false,
      showGender: false
    };
  }
};
</script>

在上面的示例代码中，我们通过v-if指令来控制年龄和性别这两列是否显示。我们在data中添加了两个属性showAge和showGender来控制这两列的显示和隐藏。

步骤二：通过checkbox动态控制表格列的显示隐藏。

我们可以通过复选框来动态地控制表格列的显示和隐藏。当用户勾选一个复选框时，我们可以根据这个复选框对应的值来控制表格的列是否显示。

<template>
  <div>
    <input type="checkbox" v-model="showAge" />显示年龄
    <input type="checkbox" v-model="showGender" />显示性别
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th v-if="showAge">年龄</th>
          <th v-if="showGender">性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in userList" :key="index">
          <td>{{ item.name }}</td>
          <td v-if="showAge">{{ item.age }}</td>
          <td v-if="showGender">{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userList: [
        { name: "张三", age: 25, gender: "男" },
        { name: "李四", age: 30, gender: "女" },
        { name: "王五", age: 28, gender: "男" }
      ],
      showAge: false,
      showGender: false
    };
  }
};
</script>

在上面的示例代码中，我们添加了两个复选框来控制显示和隐藏年龄和性别这两列。我们使用v-model指令来绑定showAge和showGender两个属性，当复选框勾选时，showAge和showGender的值会被更新，从而控制表格列的显示和隐藏。

通过以上两种方式，我们可以实现动态控制表格列的显示和隐藏。在项目中，我们可以根据实际需求来决定使用哪种方式实现。