当前位置: 首页 > article >正文

[vxe-table] vxe-table-column配合v-if导致列样式与位置错乱

<vxe-table-column 
   v-if="pageInfo.id === 4 ||pageInfo.id === 8" 
   title="上报类型" 
   width="100" 
   key='1'>
  <template v-slot="{row}">
    <span>咨询工具</span>
  </template>
</vxe-table-column>

//或者

<vxe-table-column 
    v-if="pageInfo.id === 4 ||pageInfo.id === 8" 
    title="上报类型" 
    width="100" 
    :key="Math.random()">
   <template v-slot="{row}">
     <span>咨询工具</span>
   </template>
</vxe-table-column>

给使用了v-if的列,加一个固定的key值,或循环渲染key即可;



参考:

vue+vxe-table中的vxe-table-column配合v-if导致列样式与位置错乱


http://www.kler.cn/a/147257.html

相关文章:

  • WebSocket简易聊天室实现(有详细解释)
  • 鸿蒙学习生态应用开发能力全景图-赋能套件(1)
  • vue2和vue3:diff算法的区别?
  • zabbix7.0实操指南:基于麒麟V10操作系统部署zabbix7.0
  • 正则表达式常用字符
  • 单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)
  • 文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《基于深度强化学习的城市配电网多级动态重构优化运行方法》
  • 学习c#的第二十四天
  • 最近数据分析面试的一点感悟...
  • 聚观早报 |魅族21搭载超声波指纹2.0;华为长安成立新公司
  • 研习代码 day42 | 动态规划——买卖股票的最佳时机 I II
  • unity学习笔记10
  • CF 1900B Laura and Operations 学习笔记
  • ETL+BI结合的数据集成工具
  • 了解FastSam:一个通用分割模型(草记)
  • 20231124给RK3399的挖掘机开发板在Andorid10下加鼠标右键返回
  • vue中的keep-alive详解与应用场景
  • 【React】useReducer
  • OpenCvSharp从入门到实践-(03)像素
  • 搭建web服务器
  • Android 单元测试初体验
  • shell_exec 和 exec区别
  • 机器学习——多元线性回归升维
  • HarmonyOS 数据持久化 Preferences 如何在页面中对数据进行读写
  • leetcode做题笔记828. 统计子串中的唯一字符
  • C 中的指针 - 数组和字符串