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

       更新時間: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. 效果

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

      您可能感興趣的文章:

      相關文章

      最新評論

      218彩票 www.zsjgt.com:攀枝花市| www.bishuikuai.com:岳阳县| www.wmeiyi888.com:禄丰县| www.lxgggs.com:沾益县| www.zglynn.com:赣州市| www.gz577.com:玉龙| www.thehelvetia.com:垣曲县| www.hisfountain.net:胶南市| www.bintangnusantara.com:曲靖市| www.hrp4.com:密山市| www.stephanielajoie.com:莫力| www.lakestreettrading.com:陆川县| www.cialisn.com:洪洞县| www.chinajx6688.com:三亚市| www.devpsy2015.com:天祝| www.nederlandsefilms.com:浑源县| www.eradio66.com:敖汉旗| www.g9568.com:民和| www.fenggongsi.com:宜阳县| www.pj43730.com:剑河县| www.qiaotaitai-bj.com:酒泉市| www.aiwody.com:旺苍县| www.buchuebersetzungen.com:台东市| www.99chunyin.com:镇康县| www.myfamilyschoice.com:涪陵区| www.rssjw.com:镇宁| www.pmdsales.com:柘城县| www.cp8595.com:台湾省| www.commonelementllc.com:搜索| www.chungcuhanoimoi.net:白玉县| www.plastic-cn.com:东宁县| www.koreanista.net:旬邑县| www.face53.com:法库县| www.626037.com:垦利县| www.kmtfw.cn:孝感市| www.spotcoolstuff.net:二手房| www.q2969.com:永春县| www.katepattison.com:土默特右旗| www.ah-zszs.com:青州市| www.ktv198.com:舒城县| www.yjhlqlyj.com:全南县| www.xuiacona.com:抚州市| www.taynelemon.com:瑞金市| www.baliemvalley.com:龙井市| www.pyweitong.com:阳原县| www.romanyrestaurant.com:阿合奇县| www.zzxccz.com:乌鲁木齐县| www.hg19678.com:花莲县| www.ly201.com:光山县| www.griffithinstituteprints.com:花垣县| www.dcpplayer.com:阜平县| www.hearingspecialistcarolina.com:宣武区| www.sz-jinxuan.com:泰州市| www.y9938.com:海南省| www.janvanlysebettens.com:旬阳县| www.j1wt.com:盐池县| www.mirrorsmagnifiers.com:池州市| www.dennisforhire.com:阳东县| www.tongfanglove.com:唐山市| www.lbbxb.com:疏附县| www.crosseandco.com:盐源县| www.gthforex.com:岑溪市| www.wi-fisys.com:庆云县| www.xlodz.com:岱山县| www.go115.com:湾仔区| www.hongdachen.com:晋宁县| www.adams-sailing.com:漯河市| www.ohranabg.com:光泽县| www.practicalitstrategy.com:浦江县| www.jiandingqinzi.com:庆安县| www.maadqr-app.com:肇庆市| www.addx-technologies.com:静乐县| www.21wangmi.com:阳信县| www.data-track.com:永靖县| www.3qrsw.com:梅河口市| www.christaiceforest.com:彝良县| www.cxgcpj.com:天柱县| www.im-mould.com:日土县| www.desengulu.com:东城区| www.wwwhg7863.com:任丘市| www.troninvestlimited.com:龙岩市| www.dflvshi110.com:沁源县| www.iclcsw.com:自治县| www.559367.com:绍兴县|