目錄

• 實現效果圖
• 安裝依賴
• 自定義樹形控制元件
• 其他實現
• 總結

在中通過element樹形控制元件來實現樹形表格的效果

通過縮排來實現近似樹形表格的效果

實現效果圖

安裝依賴

$ npm install element-plus --save

Element官網

自定義樹形控制元件

分析圖中控制元件分佈，每個引數都有固定的width，通過width讓數值達到對齊的效果

程式碼主要通過renderContent函式來自定義樹形控制元件

<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: ['衛星名稱代號','ZOHREH-2'],},{
                          label: ['組織機構','IRN'],{
                          label: ['頻率範圍','10950-1450'],{
                          label: '[上行]beam名稱',children: [
                              {
                                  label:['name','RS49'],{
                                  label:['freq_min','10950'],{
             http://www.cppcns.com
 
                     label:['freq_max','14500'],{
                                  label:[]'group('+'3'+')','']
                                  children:[
                                     {
                                        label:['10600361','10950','11200','0']
                                     },{
                                        label:['10600361','1120
 
0',www.cppcns.com
                                    {
                                        label:['10600361','0']
                                     }
                                  ]
                              }
                      ]
                    },],defaultProps: {
            children: 'children',label: 'label',}
    },method:{
    // 自定義樹形控制元件函式 node代表每個節點
    renderContent(h,{node,data,store}){
        // div代表樹形控制元件的一行，div中包含三個span標籤
        // 判斷節點的label陣列數量，通過三目運算來選擇class
        // 設定class來控制樹形控制元件進行對齊
      return h('div',[
          h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]),h('span',{class:'groupStyle'},node.label[1]),node.label.length === 2 ? 				'':node.label[2])
          ]);
    },}
})
</script>
<style lang="s" scoped>
.nodeStyle{
  width:110px;
  display:inline-block;
  text-align:left;
}
.groupStyle{
  width:150px;
  display:inline-block;
  textwww.cppcns.com-align:left;
}
</style>

其他實現

element樹形控制元件新增虛線

Element-ui實現樹形控制元件節點新增圖示

總結

樹形表格主要通過element的樹形控制元件的自定義函式renderContent結合css來實現

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!