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

以下是基于你提供的代码的一些建议和修改：

1. 变量绑定问题：在Vue组件中，如果你想要响应式地更新数据，并且这些数据的变化能够反映到视图上，你需要确保这些数据是响应式的。对于Vue 2.x，通常我们会在data函数中定义这些响应式数据。对于你的代码，isShowAllID变量应该定义在组件的data返回对象中。

2. 方法绑定问题：你定义的controlShow方法需要在Vue组件的methods对象中定义，以便在模板中通过@click正确调用。

3. 属性绑定问题：在模板中，你试图通过v-if="isShowColumn"来控制列的显示，但是在你的代码片段中并没有看到isShowColumn这个变量的定义。根据你的描述，这里应该是想使用isShowAllID变量。

下面是一个根据上述建议修改后的简化示例代码：

<template>
  <div>
    <el-table v-loading="loading" :data="list" stripe show-overflow-tooltip>
      <el-table-column label="ALL_ID" align="center" prop="allId" v-if="isShowAllID" />
      <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>
    <el-button @click="controlShow">测试list列显示</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义控制列是否显示的变量
      isShowAllID: false,
      // 其他数据...
      loading: false,
      list: []
    };
  },
  methods: {
    // 点击按钮改变list的列是否显示
    controlShow() {
      alert(this.isShowAllID);
      this.isShowAllID = !this.isShowAllID;
      alert(this.isShowAllID);
    }
  }
};
</script>

请注意，以上代码只是一个基本示例，根据你的实际情况，你可能需要进一步调整或添加其他逻辑。