<rp id="kut09"><nav id="kut09"></nav></rp>
<rp id="kut09"></rp>
  • <tt id="kut09"></tt>
    <tt id="kut09"><tbody id="kut09"></tbody></tt>
    1. <u id="kut09"></u>
    2. <tt id="kut09"><noscript id="kut09"></noscript></tt>
    3. vue+element UI實現樹形表格

       更新時間:2020年12月29日 15:58:41   作者:IF YOU~  
      這篇文章主要為大家詳細介紹了vue+element UI實現樹形表格,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

      本文實例為大家分享了vue+element UI實現樹形表格的具體代碼,供大家參考,具體內容如下

      一、在component文件夾下新建如下treeTable文件夾,里面有2個文件:

      eval.js:將數據轉換成樹形數據

      /**
      * @Author: jianglei
      * @Date:  2017-10-12 12:06:49
      */
      'use strict'
      import Vue from 'vue'
      export default function treeToArray(data, expandAll, parent = null, level = null) {
       let tmp = []
       Array.from(data).forEach(function(record) {
        if (record._expanded === undefined) {
         Vue.set(record, '_expanded', expandAll)
        }
        let _level = 1
        if (level !== undefined && level !== null) {
         _level = level + 1
        }
        Vue.set(record, '_level', _level)
        // 如果有父元素
        if (parent) {
         Vue.set(record, 'parent', parent)
        }
        tmp.push(record)
        if (record.children && record.children.length > 0) {
         const children = treeToArray(record.children, expandAll, record, _level)
         tmp = tmp.concat(children)
        }
       })
       return tmp
      }

      index.vue:樹形表格組件

      <template>
       <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
        <el-table-column v-if="columns.length===0" width="150">
         <template slot-scope="scope">
          <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
          <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
           <i v-if="!scope.row._expanded" class="el-icon-plus"/>
           <i v-else class="el-icon-minus"/>
          </span>
          {{ scope.$index }}
         </template>
        </el-table-column>
        <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
         <template slot-scope="scope">
          <!-- Todo -->
          <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
          <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
          <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
           <i v-if="!scope.row._expanded" class="el-icon-plus"/>
           <i v-else class="el-icon-minus"/>
          </span>
          {{ scope.row[column.value] }}
         </template>
        </el-table-column>
        <slot/>
       </el-table>
      </template>
       
      <script>
      /**
       Auth: Lei.j1ang
       Created: 2018/1/19-13:59
      */
      import treeToArray from "./eval";
      export default {
       name: "TreeTable",
       props: {
        /* eslint-disable */
        data: {
         type: [Array, Object],
         required: true
        },
        columns: {
         type: Array,
         default: () => []
        },
        evalFunc: Function,
        evalArgs: Array,
        expandAll: {
         type: Boolean,
         default: false
        }
       },
       computed: {
        // 格式化數據源
        formatData: function() {
         let tmp;
         if (!Array.isArray(this.data)) {
          tmp = [this.data];
         } else {
          tmp = this.data;
         }
         const func = this.evalFunc || treeToArray;
         const args = this.evalArgs
          ? Array.concat([tmp, this.expandAll], this.evalArgs)
          : [tmp, this.expandAll];
         return func.apply(null, args);
        }
       },
       methods: {
        showRow: function(row) {
         const show = row.row.parent
          ? row.row.parent._expanded && row.row.parent._show
          : true;
         row.row._show = show;
         return show
          ? "animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;"
          : "display:none;";
        },
        // 切換下級是否展開
        toggleExpanded: function(trIndex) {
         const record = this.formatData[trIndex];
         record._expanded = !record._expanded;
        },
        // 圖標顯示
        iconShow(index, record) {
         return index === 0 && record.children && record.children.length > 0;
        }
       }
      };
      </script>
      <style rel="stylesheet/css">
      @keyframes treeTableShow {
       from {
        opacity: 0;
       }
       to {
        opacity: 1;
       }
      }
      @-webkit-keyframes treeTableShow {
       from {
        opacity: 0;
       }
       to {
        opacity: 1;
       }
      }
      </style>
       
      <style scoped>
      .ms-tree-space {
       position: relative;
       top: 1px;
       display: inline-block;
       font-style: normal;
       font-weight: 400;
       line-height: 1;
       width: 18px;
       height: 14px;
      }
      .ms-tree-space::before {
       content: "";
      }
      .processContainer {
       width: 100%;
       height: 100%;
      }
      table td {
       line-height: 26px;
      }
      .tree-ctrl {
       position: relative;
       cursor: pointer;
       color: #2196f3;
       margin-left: -18px;
      }
      </style>

      二、在需要的地方引入該組件

      例如:在component文件夾下新建a.vue:

      <tree-table :data="data" :columns="columns" border/>
      
      import treeTable from "./TreeTable";
      
      components: { treeTable },
      data() {
        return {
         columns: [
          {
           text: "事件",
           value: "event",
           width: 200
          },
          {
           text: "ID",
           value: "id"
          },
          {
           text: "時間線",
           value: "timeLine"
          },
          {
           text: "備注",
           value: "comment"
          }
         ],
         data: [
          {
           id: 0,
           event: "事件1",
           timeLine: 50,
           comment: "無"
          },
          {
           id: 1,
           event: "事件1",
           timeLine: 100,
           comment: "無",
           children: [
            {
             id: 2,
             event: "事件2",
             timeLine: 10,
             comment: "無"
            },
            {
             id: 3,
             event: "事件3",
             timeLine: 90,
             comment: "無",
             children: [
              {
               id: 4,
               event: "事件4",
               timeLine: 5,
               comment: "無"
              },
              {
               id: 5,
               event: "事件5",
               timeLine: 10,
               comment: "無"
              },
              {
               id: 6,
               event: "事件6",
               timeLine: 75,
               comment: "無",
               children: [
                {
                 id: 7,
                 event: "事件7",
                 timeLine: 50,
                 comment: "無",
                 children: [
                  {
                   id: 71,
                   event: "事件71",
                   timeLine: 25,
                   comment: "xx"
                  },
                  {
                   id: 72,
                   event: "事件72",
                   timeLine: 5,
                   comment: "xx"
                  },
                  {
                   id: 73,
                   event: "事件73",
                   timeLine: 20,
                   comment: "xx"
                  }
                 ]
                },
                {
                 id: 8,
                 event: "事件8",
                 timeLine: 25,
                 comment: "無"
                }
               ]
              }
             ]
            }
           ]
          }
         ]
        };
       },

      以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

      相關文章

      • Vue中的無限加載vue-infinite-loading的方法

        Vue中的無限加載vue-infinite-loading的方法

        本篇文章主要介紹了Vue中的無限加載vue-infinite-loading的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2018-04-04
      • vue 解決computed修改data數據的問題

        vue 解決computed修改data數據的問題

        今天小編就為大家分享一篇vue 解決computed修改data數據的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
        2019-11-11
      • 如何在基于vue-cli的項目自定義打包環境

        如何在基于vue-cli的項目自定義打包環境

        本篇文章主要介紹了在基于vue-cli的項目自定義打包環境,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2018-11-11
      • vue彈窗組件的實現示例代碼

        vue彈窗組件的實現示例代碼

        這篇文章主要介紹了vue彈窗組件的實現示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2018-09-09
      • 深入淺析Vue中的 computed 和 watch

        深入淺析Vue中的 computed 和 watch

        computed 計算屬性是通過屬性計算得來的屬性,watch屬性變化,就會觸發監聽的函數。下面通過本文給大家介紹Vue中的 computed 和 watch,感興趣的朋友一起看看吧
        2018-06-06
      • 解決ant Design中this.props.form.validateFields未執行的問題

        解決ant Design中this.props.form.validateFields未執行的問題

        這篇文章主要介紹了解決ant Design中this.props.form.validateFields未執行的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
        2020-10-10
      • 解決vue中使用less/sass及使用中遇到無效的問題

        解決vue中使用less/sass及使用中遇到無效的問題

        這篇文章主要介紹了解決vue中使用less/sass及使用中遇到無效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
        2020-10-10
      • 在vue中獲取token,并將token寫進header的方法

        在vue中獲取token,并將token寫進header的方法

        今天小編就為大家分享一篇在vue中獲取token,并將token寫進header的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
        2018-09-09
      • 詳解Vue的mixin策略

        詳解Vue的mixin策略

        這篇文章主要介紹了Vue的mixin策略的相關資料,幫助大家更好的理解和學習vue框架,感興趣的朋友可以了解下
        2020-11-11
      • vue-infinite-loading2.0 中文文檔詳解

        vue-infinite-loading2.0 中文文檔詳解

        本篇文章主要介紹了vue-infinite-loading2.0 中文文檔詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
        2018-04-04

      最新評論

      218彩票 www.q9878.com:云浮市| www.ceilidhcostello.com:饶平县| www.thechamplife.com:琼海市| www.ao-to-ao.com:贵德县| www.jangsuchonaronia.com:瑞金市| www.xzrxsf.com:无锡市| www.jaydenmall.com:江华| www.white-label-host.com:尼勒克县| www.cp7753.com:鹤岗市| www.choicecityrebels.com:邹平县| www.wfhtdr.com:大埔区| www.chinagoodbuy.com:常宁市| www.cp7719.com:罗平县| www.hearthemlive.com:望江县| www.mzsgs.com:南木林县| www.tea778.com:昌图县| www.cp5579.com:衡南县| www.penghancurbatuempedu.com:宁津县| www.hroqbp.com:双牌县| www.hazoheng.com:祥云县| www.r3diamonds.com:靖边县| www.paintsprayerelite.com:任丘市| www.letsbecomefit.com:平和县| www.unichina-tech.com:临高县| www.mwhhs.com:商丘市| www.flooringhelper.com:临海市| www.wwwhg3533.com:开鲁县| www.aryavartcollege.com:客服| www.reitzhausproductions.com:平乐县| www.ascendingwings.com:绥江县| www.zb677.com:崇礼县| www.monterockcorp.com:锡林郭勒盟| www.anapanasatiyoga.net:广宗县| www.08981314.com:邹城市| www.xrwjw.cn:融水| www.informasijakarta.com:芜湖市| www.coocooconcepts.com:浮山县| www.kennedypromotions.com:肥城市| www.storevalentine.com:西充县| www.923007.com:基隆市| www.cokhiduchai.com:吉安市| www.madebyflek.com:民县| www.cp6783.com:依安县| www.sijiecn.com:绥化市| www.020lingyu.com:界首市| www.haofzjia.com:兴隆县| www.hautdeals.com:甘谷县| www.vacationsmaker.com:犍为县| www.creativegroupbd.com:吉安市| www.cloncurrytravel.com:宁武县| www.tecnoconfundido.org:前郭尔| www.lapakpoker.org:芦溪县| www.bisutekirevere.com:襄垣县| www.szjlufe.org:宜黄县| www.dalyanpatiohotel.com:车险| www.akpartiguzelbahce.com:金堂县| www.eschervictoria.com:凉山| www.surfaudiovideo.com:长岛县| www.shahnawazenterprises.com:和静县| www.21cloudnet.com:刚察县| www.cp9332.com:尚义县| www.f9963.com:交口县| www.qunfengdesign.com:房山区| www.vcmarienkirchen.com:霸州市| www.smartwhitesmile.com:定襄县| www.mezew.com:罗甸县| www.qgxystw.com:临湘市| www.minamihompi.com:九江县| www.shblcht.com:广西| www.charlescountytoday.com:苍梧县| www.chinesedrywallinspect.com:连平县| www.ah-zszs.com:双江| www.gandjarexe.com:伊春市| www.xirunjiaoyu.com:兰坪| www.mftyd.com:托克托县| www.kzvfe.cn:永靖县| www.3d-chain.com:永康市| www.celiacosviajeros.com:云南省| www.f3n3.com:民勤县| www.sq633.com:达日县| www.vgsscandinaviansig.org:奈曼旗| www.ditr-inc.com:温宿县| www.grupochevrolet.com:屯门区| www.temp-abc.com:古丈县|