快捷導(dǎo)航

vue(element ui)el-table樹(shù)形表格展示以及數(shù)據(jù)對(duì)齊方式

更新時(shí)間：2024年07月24日 14:46:50 作者：wangjiecsdn

這篇文章主要介紹了vue(element ui)el-table樹(shù)形表格展示以及數(shù)據(jù)對(duì)齊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

效果圖

后端返回?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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見(jiàn)實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁(yè)面沒(méi)有更新的 7 種情況匯總及延伸總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue3實(shí)現(xiàn)頁(yè)面截圖功能示例詳解
在Vue3項(xiàng)目中實(shí)現(xiàn)頁(yè)面截圖的功能,可以通過(guò)使用js-web-screen-shot組件來(lái)實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁(yè)面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時(shí)方便地獲取頁(yè)面的即時(shí)信息
2024-10-10
vue中bus的使用及踩坑解決
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問(wèn)題與解決,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下
2023-08-08
vue router路由嵌套不顯示問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題
2017-06-06
Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè)功能
ElementUI也是一套很不錯(cuò)的組件庫(kù)，對(duì)于我們經(jīng)常用到的表格、表單、時(shí)間日期選擇器等常用組件都有著很好的封裝和接口。這篇文章主要介紹了Vue2.0+ElementUI+PageHelper實(shí)現(xiàn)的表格分頁(yè),需要的朋友可以參考下
2021-10-10
Vue項(xiàng)目打包部署全過(guò)程(history模式)
vue項(xiàng)目中我們比較常用的模式為hash和history模式,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包部署的全過(guò)程,講解的是vue-router中history模式的部署,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
vue 將頁(yè)面公用的頭部組件化的方法
本篇文章主要介紹了vue 將頁(yè)面公用的頭部組件化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
vue如何自定義按鈕單選和多選
這篇文章主要介紹了vue如何自定義按鈕單選和多選問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 引入AMap高德地圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04