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