<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.4455hn.com:卓尼县| www.yarnundyedusa.com:临猗县| www.lool82.com:华坪县| www.paperswall.net:武安市| www.taifengdianqi.com:子洲县| www.heidiphotographers.com:贵州省| www.pouyateb.com:新昌县| www.sf123cq.com:额尔古纳市| www.ericagarliebphotography.com:杨浦区| www.boshichiji.com:恩平市| www.surprisegiftt.com:东山县| www.3gsands.com:普宁市| www.greatlivecds.com:同江市| www.comtery.com:太康县| www.ezkertza.com:宁强县| www.lvchuanhuanbao.com:张北县| www.jugouyao.com:霍林郭勒市| www.omymedia.com:历史| www.tiantaojiaosu.com:清苑县| www.dhc-net-cn.com:格尔木市| www.toygrc.com:错那县| www.absabsolutely.com:丹巴县| www.stguolvji.com:全州县| www.loupanvip.com:新建县| www.amphorahandbags.com:时尚| www.hg91789.com:桓台县| www.damasio34.com:莱阳市| www.awesome-book.com:乌鲁木齐市| www.zealousjourney.com:聂荣县| www.fnjsn.cn:霞浦县| www.cafeconsolas.com:周至县| www.qfaqs.com:汾西县| www.firmarehberisitesi.com:南木林县| www.the-green-find.com:长岭县| www.cp22277.com:韶山市| www.christoph-behrmann.com:武强县| www.ctocmall.com:扎鲁特旗| www.laorenke.com:萝北县| www.catelecast.com:芦溪县| www.droid-factory.com:砀山县| www.tc-punching.com:财经| www.jsd-iap.com:万宁市| www.ebikemoto.com:仙桃市| www.cp7273.com:南昌市| www.jhjzqc.com:四平市| www.jyxjbj.com:凤山市| www.hxmsk.com:江北区| www.lizsalmon.com:信阳市| www.xxjxzz.com:扎鲁特旗| www.hbresourcess.com:河北区| www.allfanpage.com:苍溪县| www.ffbjw.com:平遥县| www.kashoubangzongdai.com:射洪县| www.ermanufacture.com:舒城县| www.chenabtimes.net:长葛市| www.materiel-beaute.com:河西区| www.beroaf.com:松桃| www.wzxj888.com:三河市| www.aiwody.com:深泽县| www.better-pm.com:阿拉善右旗| www.aircompressorhose.org:安丘市| www.tmcmotor.com:抚顺县| www.reward-risk.com:阿克| www.650807.com:元谋县| www.dessertsbyrondi.com:凤山县| www.bicaraperpustakaan.com:西乡县| www.dwgmax.com:西峡县| www.unichina-tech.com:华安县| www.thebasketgourmet.com:彭水| www.whatssparkling.com:临湘市| www.kpwgw.cn:于田县| www.jollychang.com:汤阴县| www.fooool.com:格尔木市| www.gjcuk.com:牙克石市| www.loucolagiovanni.com:新泰市| www.zazenint.com:罗江县| www.cognaso.com:永昌县| www.hirdavatciyiz.com:淅川县| www.maitmall.com:胶南市| www.0527tm.com:华坪县| www.w-b-z.com:达州市| www.ccgyzh.com:武鸣县| www.gillysnow.com:肇源县| www.foligroup.com:镇江市|