element-ui table中表格错误问题解决


在iframe关闭和切换导航会引起有table的表格错位,解决办法:

handleAdminNavTab: function(tab) {
          var adminContent = this.$el.querySelector('.sc-admin__content__bd');
          var iframes = adminContent.querySelectorAll('iframe');
          this.$nextTick(function() {
              var url = 'projectController';
              iframes = Array.prototype.slice.call(iframes);
              iframes.forEach(function(iframe) {
                  if (iframe.src.indexOf(url) !== -1) {
                      var vm = iframe.contentWindow.vm;
                      if (vm && vm.$refs) {
                          //刷新表格布局
                          vm.$refs.table && vm.$refs.table.doLayout();
                      }
                  }
              });
          });
      }

主要是调用: vm.$refs.table && vm.$refs.table.doLayout();

记录下renderCell的用法(与上文问题无关):

 { label: '批注项', prop: 'commentItem' ,align:"center" , minWidth:"200",renderCell:function(h,scope){
                 return  h('div',{domProps:{
                          innerHTML:scope.row.commentItem
                     }})
 }},

原文地址:https://www.cnblogs.com/fangnianqin/p/10515589.html

时间: 2024-10-17 02:34:42

element-ui table中表格错误问题解决的相关文章

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

knockout 虚拟标签(virtual element) 在 table 中的问题

这几天看了MVC4 / 5 的一些东西, 基本上和 MVC 3都一样, 看起来毫不费力气, 项目还没有正式开工, 每天都是看文档,了解技术. 闲着无聊就把 knockout js 给看了一遍. 今天在看 SignalR的时候, 随手写了段测试代码,发现 Knockout 的虚拟标签有点问题, 一开始我是这样写的: <table> <tr data-bind="foreach:msgs"> <td data-bind="text:name"

vue+element ui table组件封装,使用render渲染

后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-table-column></el-table-column>, 维护起来相当麻烦,就想到了使用render渲染. 组件内部封装代码: <template> <el-table :data="tableData" size="medium"

element ui table组件自定义合计栏,后台给的数据

合计的数据是后台传的,所以用table组件自定义一行用来合计 <el-table border fit v-loading.body="listLoading" element-loading-text="拼命加载中" :data="getChannelData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}&q

element UI+vue:表格使用cell-style改变单元格样式

// 调用方法的部分为:<el-table:cell-style="timeStyle"> // 要修改样式的部分为: <el-table-column label="创建时间" :formatter="startTime" width="150"> // 方法: methods:// 改变表格中时间的字体样式:调小timeStyle(column) {if(column.columnIndex ===

element ui 库中 表单部分 一个很容易忽略的坑!

如果在使用element-ui1.4.* 版本中的表单时,发现某些字段绑定不了值,或者checkbox在你绑定后一点就全选了或者全部选,又或者表单验证时候有些字段没动静,那么十有八九是: 1.el-form 标签绑定data中的form时候,请使用:model="form" 而不是v-model="form". 2.请给el-form-item 标签中加上prop属性. 一些很简单的问题,也是自己踩过的坑,希望能帮到大家.

element ui table的所有属性

1. table 的props: data: { type: Array, default: function() { return []; } }, size: String, width: [String, Number], height: [String, Number], maxHeight: [String, Number], fit: { type: Boolean, default: true }, stripe: Boolean, border: Boolean, rowKey:

element ui table单选框点击全选问题

<template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState" size="small"> <el-radio :label="0" @change="operation(scope.row, RepairOrChangeListTwo[0].value,scope.row.ID)"&g

vue element UI el-table 给表格添加复选框,并得到所选值

<el-table @selection-change="changeCheckBoxValue" v-bind:data="this.requireData" v-loading="this.tableLoading" border style="width:100%" > <el-table-column min-width='140' type="selection"><