zoukankan      html  css  js  c++  java
  • el-table-column v-if条件渲染报错h.$scopedSlots.default is not a function

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

    代码示例如下:

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

    <div class="box-box-lr sta-list" v-if="value == 5">
          <el-table
            :data="fee4"
            border
            style=" 100%"
            :header-cell-style="{background:'#dee2ec', color: '#666'}" 
            :key="Math.random()"
          >
            <el-table-column prop="buildingName" label="区域" width="120"></el-table-column>
            <el-table-column prop="floors" label="楼层" width="120"></el-table-column>
            <el-table-column prop="companyName" label="入住单位" width="120"></el-table-column>
            <el-table-column prop="rooms" label="入住房间" width="120"></el-table-column>
            <el-table-column prop="area" label="入住面积" width="120"></el-table-column>
            <el-table-column label="应收电费期间" >
              <template slot-scope="scope">
                <span>{{scope.row.beginTime}}</span>-<span>{{scope.row.endTime}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fee" label="应收电费金额" width="180"></el-table-column>
            <el-table-column label="实收电费期间" >
                <template slot-scope="scope">
                  <span>{{scope.row.createTime}}</span>-<span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="payed" label="实收电费金额" width="180"></el-table-column>
            <el-table-column prop="companyEndTime" label="缴费日期" width="180"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
        </div>

    参考:https://www.cnblogs.com/hcxy/p/9669588.html

  • 相关阅读:
    javaWeb应用 ssm架构 三方外卖系统
    字节跳动2017秋招-前端工程师
    原码补码反码
    MVVM设计模式
    初始化 react 项目
    antd-mobile定制主题
    jeecg-boot 在线代码生成记
    jeecg-boot 开源代码 问题记录
    idea 导入maven 项目一点反应没有,无识别
    layui 搜索加动态添加列
  • 原文地址:https://www.cnblogs.com/opcec/p/10309869.html
Copyright © 2011-2022 走看看