elementUI踩坑記錄-el-table問題
更新時間：2024年08月06日 10:52:54 作者：簡寧909
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
項目場景
1.項目中使用到element時就會用到el-table,當table的項太多時就會使用到表格某一項的固定,如下,操作項和日期被設置了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>
問題描述：
一旦設置fixed屬性,對表格進行編輯,新增等操作時,表格被設置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變化時候內容錯亂。
這個問題也可能是由于判斷條件是v-if,換成v-show應該不會出現(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="上報機構" 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="出發(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()”
場景三：表格項設置fixed=“right”,滾動條不能拖動問題
問題描述：
鼠標只有放在左側才能移動表格,右側觸發(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>
解決方案：
這個問題是由于表格的操作項設置fixed="right"后,導致右側操作項的層級比滾動條高,所以觸發(fā)不了滾動,解決辦法就是提高滾動條的層級
在app.vue下面設置如下css
.el-table--scrollable-x .el-table__body-wrapper {
z-index : 1;
}
場景四：表格的好用屬性
:cell-class-name="tableCellClassName" // 設置項 :row-class-name="tablerowrule" //設置行
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現(xiàn)導出word文檔功能實例(含多張圖片)
項目需要導出word,于是乎又是查閱資料,然后自己寫,下面這篇文章主要給大家介紹了關于vue實現(xiàn)導出word文檔功能(含多張圖片)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了如何在Vue中導入Excel文件，文中的示例代碼講解詳細，對我們學習或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3如何添加eslint校驗(eslint-plugin-vue)
這篇文章主要介紹了vue3如何添加eslint校驗(eslint-plugin-vue),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
使用vuedraggable實現(xiàn)從左向右拖拽功能
這篇文章主要為大家詳細介紹了使用vuedraggable實現(xiàn)從左向右拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解基于vue-cli3.0如何構建功能完善的前端架子，本文整合出具備基礎功能的前端架子，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
隨著Web技術的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關于前端vue中實現(xiàn)嵌入代碼編輯器的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
路由的本質就是一種對應關系,比如說我們在url地址中輸入我們要訪問的url地址之后,瀏覽器要去請求這個url地址對應的資源,下面這篇文章主要給大家介紹了關于Vue路由傳遞參數(shù)與重定向的使用方法,需要的朋友可以參考下2022-10-10
vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03