elementUI踩坑记录-el-table问题

更新时间：2024年08月06日 10:52:54 作者：简宁909

这篇文章主要介绍了elementUI踩坑记录-el-table问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

项目场景

1.项目中使用到element时就会用到el-table,当table的项太多时就会使用到表格某一项的固定,如下,操作项和日期被设置了fixed属性…

2.table中用到列定制时,或者表格的列根据某种条件渲染时,会出现列渲染错乱的情况,如性格列渲染到年龄一列

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

<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      fixed="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.total
        this.$nextTick(() => {
            this.$refs.multipleTable.doLayout()
        })
    }).finally(() => {
        this.tableLoading = false;
    });
},

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

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

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

问题描述

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

这个问题也可能是由于判断条件是v-if,换成v-show应该不会出现此类问题

v-show是不管初始条件是什么，元素总是会被渲染。
v-if 切换有一个局部编译/卸载的过程

解决方案：

  <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()”

场景三：表格项设置fixed=“right”,滚动条不能拖动问题

问题描述：

鼠标只有放在左侧才能移动表格,右侧触发不了滚动效果

<el-table :data="tableData" stripe border  v-loading='tableLoading'>
	<el-table-column type="index" width="70" label="序号"></el-table-column>
	<el-table-column label="操作" :width="orgId=='ZY001'?600:300" fixed="right" >
		<template slot-scope="{row,$index}">
		<span>
		  <el-link style="color: #c7000b;" :underline="false" type="primary" @click="viewConference(row, $index)" title="查看会议"><i class="el-icon-view"></i>查看会议</el-link>
		</span>
		</span>
		</template>
	</el-table-column>
</el-table>

解决方案：

这个问题是由于表格的操作项设置fixed="right"后,导致右侧操作项的层级比滚动条高,所以触发不了滚动,解决办法就是提高滚动条的层级

在app.vue下面设置如下css

.el-table--scrollable-x .el-table__body-wrapper {
    z-index : 1;
  }

场景四：表格的好用属性

 :cell-class-name="tableCellClassName" // 设置项
 :row-class-name="tablerowrule"    //设置行

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现导出word文档功能实例(含多张图片)
项目需要导出word,于是乎又是查阅资料,然后自己写,下面这篇文章主要给大家介绍了关于vue实现导出word文档功能(含多张图片)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
详解如何实现在Vue中导入Excel文件
这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下
2022-01-01
Vue中watchEffect的追踪逻辑介绍
这篇文章主要介绍了Vue中watchEffect的追踪逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
vue3如何添加eslint校验(eslint-plugin-vue)
这篇文章主要介绍了vue3如何添加eslint校验(eslint-plugin-vue),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
使用vuedraggable实现从左向右拖拽功能
这篇文章主要为大家详细介绍了使用vuedraggable实现从左向右拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
详解基于vue-cli3.0如何构建功能完善的前端架子
这篇文章主要介绍了详解基于vue-cli3.0如何构建功能完善的前端架子，本文整合出具备基础功能的前端架子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
前端vue中实现嵌入代码编辑器的详细代码
随着Web技术的不断发展,前端开发也正日新月异,下面这篇文章主要给大家介绍了关于前端vue中实现嵌入代码编辑器的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
这篇文章主要介绍了uniapp使用v-loading并且不引入element-ui,首先创建loading.js，创建lloading.scss，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-10-10
Vue路由传递参数与重定向的使用方法总结
路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源,下面这篇文章主要给大家介绍了关于Vue路由传递参数与重定向的使用方法,需要的朋友可以参考下
2022-10-10
vue2.0 + element UI 中 el-table 数据导出Excel的方法
下面小编就为大家分享一篇vue2.0 + element UI 中 el-table 数据导出Excel的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03