elementUI踩坑記錄-el-table問(wèn)題
更新時(shí)間：2024年08月06日 10:52:54 作者：簡(jiǎn)寧909
這篇文章主要介紹了elementUI踩坑記錄-el-table問(wèn)題,具有很好的參考價(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>
問(wèn)題描述：
一旦設(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;
});
},
以上倆方案,解決了我的表格分裂的問(wèn)題,
場(chǎng)景二：?jiǎn)栴}描述及處理方式
表格錯(cuò)亂的問(wèn)題如下:單位列渲染了性別
問(wèn)題描述
這種導(dǎo)致是表格的列是根據(jù)后期查詢接口判斷該條是否展示,也可以根據(jù)列定制,判斷該列是否展示,如果不更新這個(gè)列key的話,顯示/隱藏列的時(shí)候,部分DOM不會(huì)重新渲染,導(dǎo)致table變化時(shí)候內(nèi)容錯(cuò)亂。
這個(gè)問(wèn)題也可能是由于判斷條件是v-if,換成v-show應(yīng)該不會(huì)出現(xiàn)此類問(wèn)題
- v-show是不管初始條件是什么，元素總是會(huì)被渲染。
- v-if 切換有一個(gè)局部編譯/卸載的過(guò)程
解決方案：
<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)問(wèn)題
問(wèn)題描述：
鼠標(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è)問(wèn)題是由于表格的操作項(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)文章
vue實(shí)現(xiàn)導(dǎo)出word文檔功能實(shí)例(含多張圖片)
項(xiàng)目需要導(dǎo)出word,于是乎又是查閱資料,然后自己寫,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)導(dǎo)出word文檔功能(含多張圖片)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3如何添加eslint校驗(yàn)(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(yàn)(eslint-plugin-vue),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細(xì)介紹了使用vuedraggable實(shí)現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子，本文整合出具備基礎(chǔ)功能的前端架子，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
Vue路由傳遞參數(shù)與重定向的使用方法總結(jié)
路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系,比如說(shuō)我們?cè)趗rl地址中輸入我們要訪問(wèn)的url地址之后,瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下2022-10-10
vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03