腳本之家服務(wù)器常用軟件

快捷導航

elementUI踩坑記錄-el-table問題

更新時間：2024年08月06日 10:52:54 作者：簡寧909

這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

項目場景

1.項目中使用到element時就會用到el-table,當table的項太多時就會使用到表格某一項的固定,如下,操作項和日期被設(shè)置了fixed屬性…

2.table中用到列定制時,或者表格的列根據(jù)某種條件渲染時,會出現(xiàn)列渲染錯亂的情況,如性格列渲染到年齡一列

場景一：問題描述及處理方式

<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>

問題描述：

一旦設(shè)置fixed屬性,對表格進行編輯,新增等操作時,表格被設(shè)置fixed的項下面就會出現(xiàn)偽橫線,如下

解決方案：

1.在不帶scoped的公共頁面樣式部門添加

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

我加了這個屬性之后,操作欄的偽橫線不見了,但是序號欄的還在,我就又加了第二個屬性

2.因為我是編輯了表格加載之后就會出現(xiàn)這個偽橫線,所以使用 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;
    });
},

以上倆方案,解決了我的表格分裂的問題,

場景二：問題描述及處理方式

表格錯亂的問題如下:單位列渲染了性別

問題描述

這種導致是表格的列是根據(jù)后期查詢接口判斷該條是否展示,也可以根據(jù)列定制,判斷該列是否展示,如果不更新這個列key的話,顯示/隱藏列的時候,部分DOM不會重新渲染,導致table變化時候內(nèi)容錯亂。

這個問題也可能是由于判斷條件是v-if,換成v-show應(yīng)該不會出現(xiàn)此類問題

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="上報機構(gòu)" 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="部門及職務(wù)" 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="出發(fā)時間" min-width="140" key="leaveDate"></el-table-column>
<el-table-column v-if="colDisplay('leaveFlight')" prop="leaveFlight" label="出發(fā)航班/車次" min-width="140" key="leaveFlight"></el-table-column>
<el-table-column v-if="colDisplay('leaveSite')" prop="leaveSite" label="出發(fā)站點" min-width="140" key="leaveSite"></el-table-column>
<el-table-column prop="auditStatus" label="狀態(tài)" 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可以是每一列的值也可以是隨機數(shù) :key=“Math.random()”

場景三：表格項設(shè)置fixed=“right”,滾動條不能拖動問題

問題描述：

鼠標只有放在左側(cè)才能移動表格,右側(cè)觸發(fā)不了滾動效果

<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>

解決方案：

這個問題是由于表格的操作項設(shè)置fixed="right"后,導致右側(cè)操作項的層級比滾動條高,所以觸發(fā)不了滾動,解決辦法就是提高滾動條的層級

在app.vue下面設(shè)置如下css

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

場景四：表格的好用屬性

 :cell-class-name="tableCellClassName" // 設(shè)置項
 :row-class-name="tablerowrule"    //設(shè)置行

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

elementUI踩坑記錄-el-table問題

目錄

項目場景

場景一：問題描述及處理方式

場景二：問題描述及處理方式

場景三：表格項設(shè)置fixed=“right”,滾動條不能拖動問題

場景四：表格的好用屬性

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具