fancycgx3650 2024-01-28 12:15 采纳率: 0%
浏览 5

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

//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"并未起作用,列一直不显示

  • 写回答

2条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2024-01-28 14:10
    关注

    【以下回答由 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的格式正确,以及在实际使用中是否存在其他因素导致列不显示的问题。


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

报告相同问题?

问题事件

  • 创建了问题 1月28日

悬赏问题

  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?
  • ¥15 thingsboard代码编译出错误
  • ¥15 博途v18仿真报错怎么解决
  • ¥15 欧姆龙plc枕式包装机 ST编程
  • ¥15 为啥快手广告联盟的广告这么难出来
  • ¥15 k8s集群重启后,kubelet一直报systemctl restart kubelet.service "Failed to delete cgroup paths"