elementUI踩坑記錄-el-table問題
更新時(shí)間：2024年08月06日 10:52:54 作者：簡(jiǎn)寧909
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
項(xiàng)目場(chǎng)景
1.項(xiàng)目中使用到element時(shí)就會(huì)用到el-table,當(dāng)table的項(xiàng)太多時(shí)就會(huì)使用到表格某一項(xiàng)的固定,如下,操作項(xiàng)和日期被設(shè)置了fixed屬性…
2.table中用到列定制時(shí),或者表格的列根據(jù)某種條件渲染時(shí),會(huì)出現(xiàn)列渲染錯(cuò)亂的情況,如性格列渲染到年齡一列
場(chǎng)景一：?jiǎ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屬性,對(duì)表格進(jìn)行編輯,新增等操作時(shí),表格被設(shè)置fixed的項(xiàng)下面就會(huì)出現(xiàn)偽橫線,如下
解決方案：
1.在不帶scoped的公共頁(yè)面樣式部門添加
.el-table__fixed-right{
height: 100% !important;
}
我加了這個(gè)屬性之后,操作欄的偽橫線不見了,但是序號(hào)欄的還在,我就又加了第二個(gè)屬性
2.因?yàn)槲沂蔷庉嬃吮砀窦虞d之后就會(huì)出現(xiàn)這個(gè)偽橫線,所以使用 el-table的doLayout方法進(jìn)行重新布局,代碼如下
<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;
});
},
以上倆方案,解決了我的表格分裂的問題,
場(chǎng)景二：?jiǎn)栴}描述及處理方式
表格錯(cuò)亂的問題如下:單位列渲染了性別
問題描述
這種導(dǎo)致是表格的列是根據(jù)后期查詢接口判斷該條是否展示,也可以根據(jù)列定制,判斷該列是否展示,如果不更新這個(gè)列key的話,顯示/隱藏列的時(shí)候,部分DOM不會(huì)重新渲染,導(dǎo)致table變化時(shí)候內(nèi)容錯(cuò)亂。
這個(gè)問題也可能是由于判斷條件是v-if,換成v-show應(yīng)該不會(huì)出現(xiàn)此類問題
- v-show是不管初始條件是什么，元素總是會(huì)被渲染。
- v-if 切換有一個(gè)局部編譯/卸載的過程
解決方案：
<el-table :data="tableData" border stripe ref="multipleTable" v-loading='tableLoading'>
<el-table-column type="index" label="序號(hào)" 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="上報(bào)機(jī)構(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="職級(jí)" 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="本人手機(jī)" min-width="140" key="phone"></el-table-column>
<el-table-column v-if="colDisplay('awardName')" prop="awardName" label="獎(jiǎng)項(xiàng)名稱" 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="到達(dá)時(shí)間" min-width="140" key="arrivalDate"></el-table-column>
<el-table-column v-if="colDisplay('arrivalSite')" prop="arrivalSite" label="到達(dá)站點(diǎn)" min-width="140" key="arrivalSite"></el-table-column>
<el-table-column v-if="colDisplay('arrivalFlight')" prop="arrivalFlight" label="到達(dá)航班/車次" 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ā)時(shí)間" 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ā)站點(diǎn)" 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>
在每一個(gè)el-table-column 上增加key,給每一個(gè)一個(gè)唯一標(biāo)識(shí) ,key可以是每一列的值也可以是隨機(jī)數(shù) :key=“Math.random()”
場(chǎng)景三：表格項(xiàng)設(shè)置fixed=“right”,滾動(dòng)條不能拖動(dòng)問題
問題描述：
鼠標(biāo)只有放在左側(cè)才能移動(dòng)表格,右側(cè)觸發(fā)不了滾動(dòng)效果
<el-table :data="tableData" stripe border v-loading='tableLoading'>
<el-table-column type="index" width="70" label="序號(hào)"></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="查看會(huì)議"><i class="el-icon-view"></i>查看會(huì)議</el-link>
</span>
</span>
</template>
</el-table-column>
</el-table>
解決方案：
這個(gè)問題是由于表格的操作項(xiàng)設(shè)置fixed="right"后,導(dǎo)致右側(cè)操作項(xiàng)的層級(jí)比滾動(dòng)條高,所以觸發(fā)不了滾動(dòng),解決辦法就是提高滾動(dòng)條的層級(jí)
在app.vue下面設(shè)置如下css
.el-table--scrollable-x .el-table__body-wrapper {
z-index : 1;
}
場(chǎng)景四：表格的好用屬性
:cell-class-name="tableCellClassName" // 設(shè)置項(xiàng) :row-class-name="tablerowrule" //設(shè)置行
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue.js源碼分析之自定義指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
文章主要介紹了父子傳值、兄弟傳值和provide/inject三種在Vue中進(jìn)行組件間通信的方法,感興趣的朋友跟隨小編一起看看吧2025-03-03
vue項(xiàng)目關(guān)閉eslint校驗(yàn)
eslint是一個(gè)JavaScript的校驗(yàn)插件，通常用來校驗(yàn)語法或代碼的書寫風(fēng)格。這篇文章主要介紹了vue項(xiàng)目關(guān)閉eslint校驗(yàn),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了antd table按表格里的日期去排序操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決
今天小編就為大家分享一篇Vue中img的src是動(dòng)態(tài)渲染時(shí)不顯示的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vscode的確是前端開發(fā)中很好的工具，安裝顏色插件，從視覺上是美的享受。這篇文章主要介紹了vscode中vue代碼顏色插件 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vuex的幾個(gè)屬性及其使用傳參,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue print.js打印支持Echarts圖表操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11