<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            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

            最新評論

            hao500彩票 www.homouie8.com:桃园县| www.nmgshanhua.com:玛曲县| www.09dn.com:嵊州市| www.convites-casamento.com:读书| www.010wg.com:朝阳区| www.fr662.com:平顶山市| www.ko600.com:资源县| www.mmnnb.com:浑源县| www.coralgablesrealtor.com:长宁区| www.bbn365.com:内江市| www.vintage-denim.com:海盐县| www.187296.com:随州市| www.coimbratrail.com:灵武市| www.gw066.com:连城县| www.atanasteodosiev.com:略阳县| www.k7679.com:格尔木市| www.fsxianxin.com:枣强县| www.danangfoundation.org:长乐市| www.xlypw.cn:五莲县| www.hvacsystemtraining.com:北流市| www.g8565.com:泰兴市| www.blogbebas.com:姜堰市| www.rlasurveys.org:文化| www.wzsghm.com:沙坪坝区| www.atramusic.com:巧家县| www.a-leap-of-faith.com:老河口市| www.empolga.com:福鼎市| www.tgase.com:噶尔县| www.arecipesite.com:章丘市| www.uniquemicrofinance.com:德令哈市| www.th336.com:三门县| www.barbaralagatta.com:岐山县| www.switchgeardubai.net:和顺县| www.jeanlucarmand.com:尉氏县| www.shoe-top.com:清丰县| www.johncusick.com:建始县| www.hg01678.com:赤水市| www.4sdzz.com:富蕴县| www.lgtopc.com:通州区| www.compassionhealing.com:阿尔山市| www.ongkingartcenter.com:五河县| www.wingsofsong.org:望都县| www.psicologiaconsciente.com:永和县| www.223980.com:土默特右旗| www.had-printing.com:泰顺县| www.hg20345.com:漾濞| www.sh61554342.com:姚安县| www.99069ww.com:温州市| www.201853.com:行唐县| www.cp3396.com:天全县| www.xemhwyn.com:东乌珠穆沁旗| www.pmtprofits.com:三河市| www.f5696.com:长泰县| www.summeranciationalize.com:策勒县| www.dollardement.com:林口县| www.mosmedia.net:罗平县| www.coulsounds.com:南木林县| www.spmcs.com:于田县| www.haosenmy.com:镇沅| www.esb8589.com:阿图什市| www.cadenceworks.com:怀远县| www.inside-economics.com:如东县| www.bateriaslight-infinity.com:利津县| www.chenxuan88.com:漳浦县| www.01gyrc.com:阿克陶县| www.114767.com:遵义县| www.genoad.com:临漳县| www.126youxiang.com:伽师县| www.clickablevideoads.com:西昌市| www.consumsostenible.com:东山县| www.itsagreed.com:丁青县| www.m5687.com:康平县| www.friendsofryankennedy.com:右玉县| www.youetme.com:广饶县| www.wwwdestinos.com:邯郸市| www.imaxsurfacecoating.com:枣阳市| www.salon-as.com:万盛区| www.hireandrental.com:手游| www.chengsekeji.com:巴彦淖尔市| www.rctrw.cn:丹东市| www.chery-ruixiang.com:孝义市| www.9908899.com:永德县| www.livemallorcahostel.com:长寿区| www.bq339.com:城市|