vue点击按钮切换list某列是否显示

Question

//list
 <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">

      <el-table-column label="ALL_ID" align="center" prop="allId" v-if="isShowColumn" />
      <el-table-column label="type_name" align="center" prop="typeName" width="120px" />
      <el-table-column label="st1_partid" align="center" prop="st1Partid" width="200px" />
      <el-table-column label="st1_fan_batchid" align="center" prop="st1FanBatchid" />
    </el-table>
  </ContentWrap>
//控制列是否显示的按钮
<el-button @click="controlShow "><Icon icon="" class="mr-5px" /> 测试list列显示</el-button>
//定义控制列是否显示的变量
var isShowAllID = false
//点击按钮改变list的列是否显示
const controlShow = () => {
  alert(isShowAllID)
  isShowAllID = !isShowAllID
  alert(isShowAllID)
}

尝试做一个点击按钮控制list某列是否显示的功能
1.定义一个变量isShowAllID (true/false),代表某列是否显示
2.定义一个方法controlShow ,在点击按钮的时候用这个方法切换isShowAllID 的值
现在碰到的问题是,点击按钮后isShowAllID变量的值会变化,但是list列的v-if="isShowColumn"并未起作用,列一直不显示

Answer 1

【以下回答由 GPT 生成】

问题分析： 根据问题描述，点击按钮后isShowAllID的值发生了变化，但是表格列的v-if="isShowColumn"并未起作用，列一直不显示。这可能是因为isShowAllID的变化没有触发视图的重新渲染。

解决建议： 1. 确保正确引入Vue库和Vue组件。 2. 在Vue组件定义的data选项中添加isShowAllID属性，并初始化为false。 3. 在Vue组件的模板中，为需要根据isShowAllID来控制显示的表格列添加v-if="isShowAllID"。 4. 在Vue组件的方法中添加controlShow方法，用于切换isShowAllID的值。在方法中通过this.isShowAllID = !this.isShowAllID来切换isShowAllID的值。 5. 在按钮的点击事件中调用controlShow方法。 6. 确保代码和标签的书写没有错误，比如对应的闭合标签。

示例代码：

<template>
  <div>
    <button @click="controlShow">控制显示</button>
    <table>
      <thead>
        <tr>
          <th v-if="isShowAllID">ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-if="isShowAllID">{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowAllID: false,
      data: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' }
      ]
    };
  },
  methods: {
    controlShow() {
      this.isShowAllID = !this.isShowAllID;
    }
  }
};
</script>

注意事项： - 确保v-if指令在正确的标签上，并且isShowAllID属性是在相应的作用域下。 - 确保模板中的button标签的点击事件绑定正确，且调用的是controlShow方法。 - 确保数据data的格式正确，以及在实际使用中是否存在其他因素导致列不显示的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^