vue通過element樹形控件實現(xiàn)樹形表格

更新時間：2021年11月23日 15:13:56 作者：一只小木頭.

這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

實現(xiàn)效果圖

效果圖

安裝依賴

$ npm install element-plus --save

Element官網(wǎng)

自定義樹形控件

效果圖

分析圖中控件分布，每個參數(shù)都有固定的width，通過width讓數(shù)值達到對齊的效果

代碼主要通過renderContent函數(shù)來自定義樹形控件

<template>
    <div class="mytree">
          <el-tree
              :data="tree_data"
              :props="defaultProps"
              @node-click="handleNodeClick"
              indent="0"
              :render-content="renderContent"
          ></el-tree>
        </div>
</template>
<script lang="ts">
import { defineComponent, ref  } from 'vue'
export default defineComponent({
    components: {},
    data() {
        return {
              tree_data: [
        {
          // type:1,
          label: 'notice-id1',
                  children: [
                        {
                          label: ['衛(wèi)星名稱代號','ZOHREH-2'],
                        },
                        {
                          label: ['組織機構(gòu)','IRN'],
                        },
                        {
                          label: ['頻率范圍','10950-1450'],
                        },
                        {
                          label: '[上行]beam名稱',
                          children: [
                              {
                                  label:['name','RS49'],
                              },
                             {
                                  label:['freq_min','10950'],
                              },
                             {
                                  label:['freq_max','14500'],
                              },
                              {
                                  label:[]'group('+'3'+')','']
                                  children:[
                                     {
                                        label:['10600361','10950','11200','0']
                                     },
                                    {
                                        label:['10600361','10950','11200','0']
                                     },
                                    {
                                        label:['10600361','10950','11200','0']
                                     }
                                  ]
                              }
                      ]
                    },
                  ],
                },
              ],
            defaultProps: {
            children: 'children',
            label: 'label',
          },
        }
    },
    method:{
    // 自定義樹形控件函數(shù) node代表每個節(jié)點
    renderContent(h,{node,data,store}){
        // div代表樹形控件的一行，div中包含三個span標簽
        // 判斷節(jié)點的label數(shù)組數(shù)量，通過三目運算來選擇class
        // 設(shè)置class來控制樹形控件進行對齊
      return h('div',[
          h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),
          h('span', {class:'groupStyle'},node.label[1]),
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? 				'':node.label[2])
          ]);
    },
    }
})
</script>
<style lang="scss" scoped>
.nodeStyle{
  width:110px;
  display:inline-block;
  text-align:left;
}
.groupStyle{
  width:150px;
  display:inline-block;
  text-align:left;
}
</style>