table使用if和el-table-column使用if恶心到吐了

最新推荐文章于 2024-02-01 17:50:27 发布

大白菜1号

最新推荐文章于 2024-02-01 17:50:27 发布

阅读量3.2k

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/men_gqi/article/details/121554046

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

这篇博客讲述了在Vue.js中遇到的关于if条件渲染在table上失效的问题，以及el-table-column使用v-if导致的字段位置变动问题。作者通过在table外层添加div并使用v-if解决表格整体显示控制，同时为了解决字段动态显示的同步问题，尝试了使用key=“Math.random()”来强制更新，虽然造成了短暂的闪烁效果。最终，作者选择将表格拆分成多个组件来避免这些问题。

摘要由CSDN通过智能技术生成

1. 如果直接在table上加if会不起作用,建议添加div标签包裹之后使用

       <div v-if="Sample === 'all'">
         <el-table  :data="tableData"
           stripe
            border
            height="450"
            style="width: 100%; margin-top: 15px"
           >
           <el-table-column
            prop="order_time"
            v-if="Sample === 'all'||Sample ==='recovered'||Sample === 'reclaimed'"
            label="订单">
          </el-table-column>
        </el-table>
      </div>

1. 如果想控制表格字段变化时候,真是踩空一个一准

先是使用 type=“selection” 使用v-if或者v-show时候不更新,时灵时不灵,没办法只能分开两个表格使用1中的方法对table做判断
再是el-table-column使用v-if之后字段位置变化不固定,由于判断条件不是index不能使用:key=index,只能强制处理使用 :key=“Math.random()”,万万没想到强制固定字段位置之后,会有一个切换过程, 也就是表格先是字段位置随机在两秒的时间里在变更成固定, 效果感觉像是在骗傻子

     <el-table-column
       prop="order_time"
       v-if="Sample === 'all'||Sample ==='recovered'||Sample === 'reclaimed'"
       label="订单">
     </el-table-column>