zoukankan      html  css  js  c++  java
  • vue+elementUI表格列显示隐藏遇到bug

    在最近的项目中,有需求要做到根据字段显示列,原来以为简单的v-if可以解决。

    在开发的过程中遇到问题,

    <el-table ref="multipleTable"  
    	:data="assetData"
    	class="select_wrap"
    	border
    	:header-cell-style="{background:'#F5F7FA'}"
    	style=" 100%"
    	@selection-change="handleSelectionChange">
    
    	<el-table-column type="selection" width="55" :key="Math.random()"  v-if="this.systemType1 == 'OPORE'"></el-table-column>
    
    	<el-table-column prop="subject" label="说明" :key="Math.random()" show-overflow-tooltip></el-table-column>
    
            <el-table-column prop="userName" label="创建用户" :key="Math.random()" show-overflow-tooltip></el-table-column>
    
            <el-table-column prop="beginTime" label="创建时间" :key="Math.random()" show-overflow-tooltip> </el-table-column>
    
    	<el-table-column prop="zrson" label="不关闭原因" :key="Math.random()"  width='100' show-overflow-tooltip v-if="this.systemType1 == 'OPORE'"></el-table-column>
    
    
    </el-table>
    
    

    在不加:key="Math.random()"的时候会报错 h.$scopedSlots.default is not a function

    究其原因,是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有一个性能优化机制,就是相同dom会被复用,这就是问题所在,所以,通过key去标识一下当前行是唯一的,不许复用,就行了。

    添加 :key="Math.random()"

  • 相关阅读:
    OAF 开发,给组件添加javascript事件
    SQL SERVER占用CPU过高优化
    Winform嵌入CEF(非正常用法)
    多线程——i++的坑
    20150819(i++与++i的思考)
    listView中,checkBox的显示和隐藏
    装箱和拆箱
    虚方法
    [转]关于struct的一些解释与class对比
    提取行政区边界经纬度坐标(高德+百度)
  • 原文地址:https://www.cnblogs.com/yinxingen/p/9995769.html
Copyright © 2011-2022 走看看