vue(element ui)el-table樹(shù)形表格展示以及數(shù)據(jù)對(duì)齊方式
效果圖
后端返回?cái)?shù)據(jù)結(jié)構(gòu)
頁(yè)面代碼
<el-table class="sysDictInfoTable" :data="tableData" height="380" style="width: 100%;" row-key="nodeId" :tree-props="{ children: 'relatedPartyChild', hasChildren: 'hasChildren' }"> <el-table-column prop="relatedname" label="名稱"> </el-table-column> <el-table-column prop="idTypeName" label="證件類型"> </el-table-column> <el-table-column prop="identityNo" label="證件號(hào)碼"> </el-table-column> <el-table-column label="操作" width="250" fixed="right"> <template #default="scope"> <el-button type="primary" size="small" @click="ModifyTable(scope.row)">修改</el-button> </template> </el-table-column> </el-table>
<script> export default { data () { return { tableData: [], }; }, mounted () { this.search(); }, methods: { //查詢 search () { let formData = { parentcode: '0' } affiliatedQuery_tree(formData).then((res) => { //接口返回列表 this.tableData = res.data; }).catch(() => { this.tableData = []; }); }, //修改 ModifyTable(){} }, }; </script>
<style scoped lang='scss'> // el-table表格對(duì)齊 .sysDictInfoTable ::v-deep .el-table__row:not([class*="el-table__row--level-"]) { td:first-child { padding-left: 24px !important; //一級(jí)數(shù)據(jù)無(wú)Child縮進(jìn) } } .sysDictInfoTable ::v-deep .el-table__placeholder{ margin-left: 3px; //子節(jié)點(diǎn)無(wú)Child縮進(jìn) } </style>
注意點(diǎn):
el-table配置里row-key必須是唯一性
:tree-props=“{ children: ‘relatedPartyChild', hasChildren: ‘hasChildren' }”
children配置為后端返回的節(jié)點(diǎn)字段即可
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
- vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- 使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
- Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程
- vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法
- vue Element UI 解決表格數(shù)據(jù)不更新問(wèn)題及解決方案
相關(guān)文章
vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄
這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題
這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06vue實(shí)現(xiàn)動(dòng)態(tài)添加元素(可刪除)
文章介紹了如何在Vue中動(dòng)態(tài)添加和刪除元素,通過(guò)使用Vue的響應(yīng)式數(shù)據(jù)和v-for指令,可以輕松地實(shí)現(xiàn)這一功能,文章還詳細(xì)講解了如何處理元素的添加和刪除事件,以及如何更新視圖以反映這些變化2024-12-12VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件
本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動(dòng)態(tài)的加載VUE組件的過(guò)程,有這方面需求的朋友跟著學(xué)習(xí)下吧。2018-01-01