项目场景：

1.项目中使用到element时就会用到el-table,当table的项太多时就会使用到表格某一项的固定,如下,操作项和日期被设置了fixed属性…
2.table中用到列定制时,或者表格的列根据某种条件渲染时,会出现列渲染错乱的情况,如性格列渲染到年龄一列

场景一 :问题描述及处理方式

<el-table:data="tableData"borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table>

问题描述

一旦设置fixed属性,对表格进行编辑,新增等操作时,表格被设置fixed的项下面就会出现伪横线,如下

解决方案：

1.在不带scoped的公共页面样式部门添加


.el-table__fixed-right{height: 100% !important; }

我加了这个属性之后,操作栏的伪横线不见了,但是序号栏的还在,我就又加了第二个属性
2.因为我是编辑了表格加载之后就会出现这个伪横线,所以使用 el-table的doLayout方法进行重新布局,代码如下

<el-table ref="multipleTable" :data="tableData">...
</el-table>getTableList() {let targetForm = Object.assign(this.searchForm, this.reqForm, {"conferenceId": this.conferenceId})conferenceAuditApi.getPeportManList(targetForm).then(res => {this.tableData = res.data.data// console.log(this.tableData);this.total = res.data.totalthis.$nextTick(() => {this.$refs.multipleTable.doLayout()})}).finally(() => {this.tableLoading = false;});
},

以上俩方案,解决了我的表格分裂的问题,

场景二 :问题描述及处理方式

表格错乱的问题如下:单位列渲染了性别

问题描述

这种导致是表格的列是根据后期查询接口判断该条是否展示,也可以根据列定制,判断该列是否展示,如果不更新这个列key的话,显示/隐藏列的时候,部分DOM不会重新渲染,导致table变化时候内容错乱。

解决方案：

  <el-table :data="tableData" border stripe ref="multipleTable"  v-loading='tableLoading'>
<el-table-column type="index" label="序号" width="70"></el-table-column>
<el-table-column v-if="colDisplay('username')" prop="username" label="姓名" min-width="140" key="username"></el-table-column>
<!-- <el-table-column v-if="colDisplay('submitOrgCn')" prop="submitOrgCn" label="上报机构" min-width="140"></el-table-column> -->
<el-table-column v-if="colDisplay('sex')" prop="sex" label="性别" min-width="60" key="sex">
<template slot-scope="{row}">{{ $dict.getLabel('sys_sex', row.sex) }}</template>
</el-table-column>
<el-table-column v-if="colDisplay('orgName')" prop="orgName" label="单位" min-width="140" key="orgName"></el-table-column>
<el-table-column v-if="colDisplay('post')" prop="post" label="部门及职务" min-width="140" key="post"></el-table-column>
<el-table-column v-if="colDisplay('rank')" prop="rank" label="职级" min-width="140" key="rank">
<template slot-scope="{row}">{{ $dict.getLabel('participate_rank', row.rank) }}</template>
</el-table-column>
<el-table-column v-if="colDisplay('nation')" prop="nation" label="民族" min-width="140" key="nation"></el-table-column>
<el-table-column v-if="colDisplay('officePhone')" prop="officePhone" label="本人办公电话" min-width="140" key="officePhone"></el-table-column>
<el-table-column v-if="colDisplay('phone')" prop="phone" label="本人手机" min-width="140" key="phone"></el-table-column>
<el-table-column v-if="colDisplay('awardName')" prop="awardName" label="奖项名称" min-width="140" key="awardName"></el-table-column>
<el-table-column v-if="colDisplay('remarks')" prop="remarks" label="备注信息" min-width="140" key="remarks"></el-table-column>
<el-table-column v-if="colDisplay('isReceive')" prop="isReceive" label="是否接站" min-width="140" key="isReceive">
<template slot-scope="{row}">{{ $dict.getLabel('sf_yes_no_none', row.isReceive) }}</template>
</el-table-column>
<el-table-column v-if="colDisplay('arrivalDate')" prop="arrivalDate" label="到达时间" min-width="140" key="arrivalDate"></el-table-column>
<el-table-column v-if="colDisplay('arrivalSite')" prop="arrivalSite" label="到达站点" min-width="140" key="arrivalSite"></el-table-column>
<el-table-column v-if="colDisplay('arrivalFlight')" prop="arrivalFlight" label="到达航班/车次" min-width="140" key="arrivalFlight"></el-table-column>
<el-table-column v-if="colDisplay('isSend')" prop="isSend" label="是否送站" min-width="140" key="isSend">
<template slot-scope="{row}">{{ $dict.getLabel('sf_yes_no_none', row.isSend) }}</template>
</el-table-column>
<el-table-column v-if="colDisplay('leaveDate')" prop="leaveDate" label="出发时间" min-width="140" key="leaveDate"></el-table-column>
<el-table-column v-if="colDisplay('leaveFlight')" prop="leaveFlight" label="出发航班/车次" min-width="140" key="leaveFlight"></el-table-column>
<el-table-column v-if="colDisplay('leaveSite')" prop="leaveSite" label="出发站点" min-width="140" key="leaveSite"></el-table-column>
<el-table-column prop="auditStatus" label="状态" fixed="right" key="auditStatus">
<template slot-scope="{row}">{{auditStatusList[row.auditStatus]}}</template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right">
<template slot-scope="{row,$index}"><span v-if="(row.auditStatus!=='1')&&(row.auditStatus!=='5')"><el-link style="color: #c7000b;" :underline="false" type="primary" @click="edit(row)"><i class="el-icon-edit" style="padding-right: 8px"></i>编辑</el-link><el-divider direction="vertical"></el-divider></span><span v-if="(row.auditStatus!=='1')&&(row.auditStatus!=='5')"><el-link style="color: #c7000b;" :underline="false" type="primary" @click="del(row,$index)"><i class="el-icon-delete" style="padding-right: 8px"></i>删除</el-link></span>
</template>
</el-table-column>
</el-table>

在每一个el-table-column 上增加key,给每一个一个唯一标识 ,key可以是每一列的值也可以是随机数 :key=“Math.random()”

elementUI踩坑记录-el-table相关推荐

osx php7 imagick,[PHP] MacOS 自带php环境安装imagick扩展踩坑记录 | 码农部落
前言最近学习yii2,在搭建环境后,发现在访问contact页面时报错,如下: "Either GD PHP extension with FreeType support or Imag ...
vue-i18n使用及踩坑记录
使用步骤 1. 安装 npm i vue-i18n 2. vue-cli下使用 //1. 引入 vue-i18n import Vue from 'vue' import VueI18n from ' ...
mysql 使用sum limit_mysql踩坑记录之limit和sum函数混合使用问题
问题复盘本次复盘会用一个很简单的订单表作为示例. 数据准备订单表建表语句如下(这里偷懒了,使用了自增ID,实际开发中不建议使用自增ID作为订单ID) CREATE TABLE `order` ( ...
日常踩坑记录-汇总版
开发踩坑记录,不定时更新心得 RTFM 严谨的去思考问题,处理问题严格要求自己的代码编写习惯与风格注意单词拼写 20200207 mybatis plus 自带insert插入异常 sql i ...
【mysql】踩坑记录之derived(派生表)
文章目录前言出现的问题如何解决方法一:改写sql 方法二:改写sql 方法三:改写sql 前言很多时候我们常常感觉到,不要你以为,mysql要它以为.记录派生表踩坑记录. 首先说明环境mys ...
Canal 及canal.admin(v1.1.5)踩坑记录
网址:GitHub - alibaba/canal: 阿里巴巴 MySQL binlog 增量订阅&消费组件前期软件准备上面的软件包(canal.deployer-1.1.5.tar.gz ...
VUE 集成富文本编辑器及踩坑记录
一.查看 vue版本和vue cli版本首先要知道自己所使用的VUE 版本和脚手架(VUE CLI)版本这样自己无论是在百度的时候还是选择富文本编辑器对应版本的时候都方便很多 1.查看vue 版 ...
NanoPi-M1 Plus(全志H3)踩坑记录
NanoPi-M1 Plus(全志H3)踩坑记录未带有遥控器使用之前NanoPi-T2的遥控器,通用: 分辨率不正确设备->画面设置->缩小95% 即可: 无法使用tinyalsa ...
为Jupyter notebook配置R kernel过程及踩坑记录
为Jupyter notebook配置R kernel过程及踩坑记录注意:本文为作者安装过程及折腾的过程,内容比较冗杂,如果读者想直接创建一个属于自己的子环境则参考: 如下文章: anaconda下 ...

elementUI踩坑记录-el-table

项目场景：

场景一 :问题描述及处理方式

问题描述

解决方案：

场景二 :问题描述及处理方式

问题描述

解决方案：

elementUI踩坑记录-el-table相关推荐

最新文章

热门文章