亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄

    vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄

    這篇文章主要為大家詳細(xì)介紹了vue-drawer-layout實(shí)現(xiàn)手勢(shì)滑出菜單欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Vue?FileManagerPlugin?報(bào)錯(cuò)問(wèn)題及解決

    Vue?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)題

    這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-06-06
  • vue中使用tinymce及插件powerpaste的使用

    vue中使用tinymce及插件powerpaste的使用

    這篇文章主要介紹了vue中使用tinymce,以及插件powerpaste的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vue實(shí)現(xiàn)吸壁懸浮球

    vue實(shí)現(xiàn)吸壁懸浮球

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)吸壁懸浮球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue實(shí)現(xiàn)動(dòng)態(tài)添加元素(可刪除)

    vue實(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-12
  • VUE使用 wx-open-launch-app 組件開(kāi)發(fā)微信打開(kāi)APP功能

    VUE使用 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
  • 淺析vue3項(xiàng)目中自定義指令的運(yùn)用

    淺析vue3項(xiàng)目中自定義指令的運(yùn)用

    自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,通過(guò)自定義指令,我們可以直接在模板中使用指令名,下面我們就來(lái)看看項(xiàng)目中具體如何使用自定義指令的吧
    2023-08-08
  • VUE2.0中Jsonp的使用方法

    VUE2.0中Jsonp的使用方法

    使用JSONP主要是目的通過(guò)動(dòng)態(tài)創(chuàng)建Script,動(dòng)態(tài)拼接url,進(jìn)而抓取數(shù)據(jù),實(shí)現(xiàn)跨域。這篇文章主要介紹了VUE2.0中Jsonp的使用方法(前端),需要的朋友可以參考下
    2018-05-05
  • 動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件

    動(dòng)態(tài)加載權(quán)限管理模塊中的Vue組件

    本篇文章給大家詳細(xì)講解了如何在權(quán)限管理模塊中動(dòng)態(tài)的加載VUE組件的過(guò)程,有這方面需求的朋友跟著學(xué)習(xí)下吧。
    2018-01-01

最新評(píng)論