<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.cfzqq.com:大埔区| www.dlmc-0411.com:舒城县| www.cssmuseum.com:台安县| www.borrevannet.net:凌云县| www.idcommusa.com:华容县| www.cp7892.com:绍兴县| www.andyhennegan.com:绥化市| www.eoilc.com:德钦县| www.foxbreaks.com:遂川县| www.gjjjsq.com:武川县| www.im-mould.com:汕头市| www.scybsq.com:和平区| www.valentine1china.com:大悟县| www.m3ji.com:大姚县| www.generofem.com:凯里市| www.u2ee.com:无极县| www.bigideasgroup.org:永和县| www.wh256.com:西盟| www.befms.com:门源| www.attitude-digital.com:甘孜| www.bagit2go.com:山西省| www.thuebannhadat.net:哈尔滨市| www.spjjs.com:星子县| www.libertytechs.com:临邑县| www.donorsnet.net:肇州县| www.293385.com:安庆市| www.inretrospectweb.com:中方县| www.wh-tattoo.com:朝阳区| www.berniewolfsdorf.com:龙里县| www.coocooconcepts.com:十堰市| www.51cuike.com:中西区| www.sl869.com:五大连池市| www.sjulnas.com:张家界市| www.auktis.com:庄浪县| www.kinostream.net:通榆县| www.lauragottlieb.com:柳州市| www.hg71789.com:安化县| www.guxingrun.com:民勤县| www.blgzs88.com:三江| www.jinshayule53.com:和田市| www.grammylist.org:吉木乃县| www.stranded-deep.net:东丰县| www.breakerror.com:铁岭市| www.fm556.com:苗栗市| www.tianlijiqi.com:秀山| www.gbbsrh.com:萨迦县| www.silvermx5.com:皮山县| www.toystorez.com:定安县| www.tjchengdu.com:高邮市| www.s59uk.com:贞丰县| www.merryzoe.com:龙海市| www.re-cyclers.com:延边| www.abzmli.com:桐城市| www.ipadwallpaperhd.com:和政县| www.mdhrh.cn:正蓝旗| www.novel199.com:辰溪县| www.xjydylny.com:新平| www.499310.com:镇江市| www.maadqr-app.com:祁阳县| www.mehmet-ali.net:岑溪市| www.shermantheband.com:托克逊县| www.vipsus.com:互助| www.mbkty.cn:安远县| www.n7992.com:鸡西市| www.ramblingabare.com:绥滨县| www.blackindianmusic.com:柳河县| www.bushenev.com:岗巴县| www.cp1696.com:华容县| www.klinik-perkasa.com:桐城市| www.ibizacerrajero.com:高邮市| www.n9bx.com:古丈县| www.asramled.com:辽源市| www.ottomantranslate.com:堆龙德庆县| www.relationshipbreakp.com:延津县| www.pj88837.com:乌鲁木齐市| www.myspaceproxyace.com:仙桃市| www.taian720.com:罗江县| www.chengyuzs.com:手游| www.blackindianmusic.com:广丰县| www.jkfdu.com:桦川县| www.sun-automation.com:沐川县| www.tgase.com:南澳县| www.srmcinc.org:全椒县| www.ylcwyy.com:富蕴县|