el-table樹形數(shù)據(jù)序號排序處理方案
更新時間：2024年03月19日 11:19:22 作者：Cool_so_cool
這篇文章主要介紹了el-table樹形數(shù)據(jù)序號排序處理方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
1，用下面這個代碼可以實現(xiàn)基本表格的序號排序
<el-table-column label="序號" width="50px" align="center">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
2，element ui樹形結(jié)構(gòu)的表格，是沒有序號排序的，如果還是用上面的代碼，序號排序的時候也會把數(shù)據(jù)的子節(jié)點進(jìn)行序號排序
上面那個肯定不是我們想要的效果，直接上代碼，看最終效果
this.tableData1.forEach((item, index) => {
item.parentIndex = index + 1;
if (item.children) {
item.children.forEach((it, ind) => {
it.parentIndex = item.parentIndex + "-" + (ind + 1)
})
}
})展開前
展開后
到此這篇關(guān)于el-table樹形數(shù)據(jù)序號排序處理的文章就介紹到這了,更多相關(guān)el-table樹形數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項目的打包是一個非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法
vue3 集成 echarts 最大的坑就是出現(xiàn)了,reactive 的數(shù)據(jù) 刷新了,但圖表缺不會刷新,所以本文就給大家詳細(xì)的介紹一下vue3集成echarts數(shù)據(jù)刷新后圖表不刷新的解決方法,需要的朋友可以參考下2023-08-08
vue中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項目中如何引入本地第三方JS庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
Vue build過程取消console debugger控制臺信息輸出方法詳解
這篇文章主要為大家介紹了Vue build過程取消console debugger控制臺信息輸出方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)樹形菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽
這篇文章主要給大家介紹了基于vue+electron實現(xiàn)文件下載打開wps預(yù)覽,文中有詳細(xì)的代碼示例供大家借鑒參考,感興趣的同學(xué)可以參考閱讀下2023-08-08
vue實現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實現(xiàn)el-select的change事件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue項目中對index.html中BASE_URL的配置方式
這篇文章主要介紹了Vue項目中對index.html中BASE_URL的配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項目運(yùn)行或打包時,頻繁內(nèi)存溢出情況問題
這篇文章主要介紹了vue項目運(yùn)行或打包時，頻繁內(nèi)存溢出情況的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
利用vuex-persistedstate將vuex本地存儲實現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04