<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實現樹狀表格效果

             更新時間:2020年12月29日 16:09:46   作者:保護我方豆豆  
            這篇文章主要為大家詳細介紹了vue實現樹狀表格效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

            1. 初始化配置

            安裝模塊:

            npm i vue-table-with-tree-grid -S

            main.js 文件

            import ZkTable from 'vue-table-with-tree-grid'
            Vue.component(ZkTable.name, ZkTable);

            2. 使用

            <template lang="html">
             <div id="example">
             <zk-table
              ref="table"
              index-text="#"
              :data="data"
              :columns="columns"
              :stripe="props.stripe"
              :border="props.border"
              :show-header="props.showHeader"
              :show-summary="props.showSummary"
              :show-row-hover="props.showRowHover"
              :show-index="props.showIndex"
              :tree-type="props.treeType"
              :is-fold="props.isFold"
              :expand-type="props.expandType"
              :selection-type="props.selectionType">
            
              <template slot="likes" scope="scope">
              {{ scope.row.likes.join(',') }}
              </template>
             </zk-table>
             </div>
            </template>
            
            <script>
            
             export default {
             name: 'example',
            
             data() {
              return {
              props: {
               stripe: false, // 是否顯示間隔斑馬紋
               border: true, // 是否顯示縱向邊框
               showHeader: true, // 是否顯示表頭
               showSummary: false, // 是否顯示表尾合計行
               showRowHover: true, // 鼠標懸停時,是否高亮當前行
               showIndex: true, // 是否顯示數據索引
               treeType: true, // 是否為樹形表格
               isFold: true, // 樹形表格中父級是否默認折疊
               expandType: false, // 是否為展開行類型表格(為 True 時,需要添加名稱為 '$expand' 的作用域插槽, 它可以獲取到 row, rowIndex)
               selectionType: false, // 是否為多選類型表格
              },
              data: [
               {
               name: 'Jack',
               sex: 'male',
               likes: ['football', 'basketball'],
               score: 10,
               children: [
                {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
                children: [
                 {
                 name: 'Ashley',
                 sex: 'female',
                 likes: ['football', 'basketball'],
                 score: 20,
                 },
                 {
                 name: 'Taki',
                 sex: 'male',
                 likes: ['football', 'basketball'],
                 score: 10,
                 children: [
                  {
                  name: 'Ashley',
                  sex: 'female',
                  likes: ['football', 'basketball'],
                  score: 20,
                  },
                  {
                  name: 'Taki',
                  sex: 'male',
                  likes: ['football', 'basketball'],
                  score: 10,
                  children: [
                   {
                   name: 'Ashley',
                   sex: 'female',
                   likes: ['football', 'basketball'],
                   score: 20,
                   },
                   {
                   name: 'Taki',
                   sex: 'male',
                   likes: ['football', 'basketball'],
                   score: 10,
                   },
                  ],
                  },
                 ],
                 },
                ],
                },
                {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
                },
               ],
               },
               {
               name: 'Tom',
               sex: 'male',
               likes: ['football', 'basketball'],
               score: 20,
               children: [
                {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
                children: [
                 {
                 name: 'Ashley',
                 sex: 'female',
                 likes: ['football', 'basketball'],
                 score: 20,
                 },
                 {
                 name: 'Taki',
                 sex: 'male',
                 likes: ['football', 'basketball'],
                 score: 10,
                 },
                ],
                },
                {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
                children: [
                 {
                 name: 'Ashley',
                 sex: 'female',
                 likes: ['football', 'basketball'],
                 score: 20,
                 },
                 {
                 name: 'Taki',
                 sex: 'male',
                 likes: ['football', 'basketball'],
                 score: 10,
                 },
                ],
                },
               ],
               },
               {
               name: 'Tom',
               sex: 'male',
               likes: ['football', 'basketball'],
               score: 20,
               },
               {
               name: 'Tom',
               sex: 'male',
               likes: ['football', 'basketball'],
               score: 20,
               children: [
                {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
                },
                {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
                },
               ],
               },
              ],
              columns: [
               {
               label: 'name', // 列標題名稱
               prop: 'name', // 對應列內容的屬性名
               width: '400px', // 列寬度
               },
               {
               label: 'sex',
               prop: 'sex',
               minWidth: '50px',
               },
               {
               label: 'score',
               prop: 'score',
               },
               {
               label: 'likes',
               prop: 'likes',
               minWidth: '200px',
               type: 'template',
               template: 'likes', // 列類型為 'template'(自定義列模板) 時,對應的作用域插槽(它可以獲取到 row, rowIndex, column, columnIndex)名稱
               },
              ],
              };
             },
             };
            </script>
            
            <style scoped lang="less">
             * {
             margin: 0;
             padding: 0;
             }
             .switch-list {
             margin: 20px 0;
             list-style: none;
             overflow: hidden;
             }
             .switch-item {
             margin: 20px;
             float: left;
             }
            </style>

            3. 效果

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

            您可能感興趣的文章:

            相關文章

            最新評論

            hao500彩票 www.g9773.com:盖州市| www.798666x.com:德兴市| www.dedicationcompilation.com:额济纳旗| www.heritage-academy.org:抚松县| www.posthostelprague.com:高雄市| www.zcxjw.cn:贵定县| www.g7552.com:黄石市| www.gerakansehat.com:蒙山县| www.rldmw.cn:金堂县| www.jessinet.com:曲沃县| www.kyouhu.com:河北区| www.686302.com:潜江市| www.mark500.com:敦化市| www.gtparking.com:肥乡县| www.bmwholding.com:山东省| www.wh256.com:毕节市| www.healtheworldtour.org:双鸭山市| www.936729.com:平潭县| www.thedoveexperience.com:蛟河市| www.b495.com:雷山县| www.zzcsfs.com:万山特区| www.henllyy.com:巫溪县| www.eticketfiling.com:紫云| www.wateric-valve.com:东港市| www.scdhfl.com:天镇县| www.publicjusticeforum.org:祁阳县| www.zsgaori.com:永安市| www.stonedz.com:西城区| www.fjfl.org:黄大仙区| www.f5865.com:红安县| www.lgmedicine.com:定陶县| www.sz-jinxuan.com:偏关县| www.xuanfengling.com:孟津县| www.cnxhy.com:北安市| www.snowkeyice.com:丹棱县| www.chrome-icons.com:友谊县| www.youchenfood.com:鄢陵县| www.jugouyao.com:清原| www.zxjnw.cn:宝坻区| www.sxshangle.com:屏南县| www.ipslo.com:黔江区| www.non-league.net:察隅县| www.gfcf14greendream.com:双鸭山市| www.boshichiji.com:揭西县| www.569397.com:安多县| www.fapuc.com:夏河县| www.andyandnina.com:三明市| www.waizit.com:乌鲁木齐市| www.bloggerjomblo.com:宁津县| www.grammylist.org:乐陵市| www.my-testimony.org:高尔夫| www.guitartrick.net:汶川县| www.avancemosconosur.org:博白县| www.releaseinfo.org:建昌县| www.vmarketingblog.com:策勒县| www.bwbuffaloridgeinn.com:兴业县| www.cbplanningpartners.com:浮梁县| www.1212312.com:永福县| www.falsestop.com:灵寿县| www.zhuangshita88.com:阳春市| www.wwwhg8682.com:漯河市| www.yookow.com:三门县| www.chambres-dhotes-le-cigalon.com:商河县| www.rivalecanecorsos.com:冀州市| www.cmacgmlogistics.com:拉孜县| www.starsmadrid.com:察隅县| www.ew08.com:商城县| www.voipepoch.com:龙海市| www.asramled.com:永城市| www.brand-gate.com:繁昌县| www.wfzfcn.com:本溪| www.zgwhzy.com:无棣县| www.autocrz.com:大丰市| www.lumpyslist.com:丘北县| www.jkfdu.com:玉环县| www.798666v.com:甘谷县| www.medianewslive.com:临清市| www.nexlinkz.com:宜宾县| www.imperialfmodels.com:甘南县| www.ebuygift.com:高安市| www.shopitbd.com:溆浦县| www.rescommsolutions.com:威信县| www.126youxiang.com:湟中县| www.manuel-huber.net:葵青区|