欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

本文實例為大家分享了vue實現(xiàn)樹狀表格的具體代碼，供大家參考，具體內(nèi)容如下

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, // 是否顯示數(shù)據(jù)索引
   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', // 對應列內(nèi)容的屬性名
   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. 效果

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• JS前端模塊化有啥好處?這幾種規(guī)范你了解嗎?

  這篇文章小編給大家分享的是JS前端模塊化規(guī)范的內(nèi)容，下文介紹了模塊化的好處以及幾種前端模塊化規(guī)范，文中示例介紹的很詳細，對大家學習JS前端模塊化有一定的幫助，感興趣的朋友可以了解看看，下面讓我們一起來學習一下吧！

• vue打包文件太大的問題怎么辦，怎樣進行優(yōu)化處理

  目錄vue打包生成的js文件過大優(yōu)化1.組件按需加載2.去掉生成map文件3.cdn引入4.路由懶加載5.代碼壓縮6.最后項目打包之后js文件太大問題問題描述1.使用cdn引入不怎么改變的第三方庫2.使用vue的懶加載3.服務器和前端配置開啟壓縮vue打包生成的js文件過大優(yōu)化1.組件按需加載現(xiàn)在大多的ui庫都是以組件

• JavaScript實現(xiàn)簡易留言板效果

  我們在一些社區(qū)論壇常常會看到留言板，那么留言板功能是如何實現(xiàn)呢？首先我們們要了解基本需求，在留言板模塊，用戶能夠發(fā)布評論，而且評論會按照時間排序，最新的評論會將舊的評論抵下去。此外，刪除的權(quán)限只有博主有，用戶不可刪除評論。了解完基本需求，接下來介紹一下實現(xiàn)建議留言板效果的具體代碼：

• 小程序?qū)崿F(xiàn)拍照打卡的詳細代碼是什么

  微信小程序?qū)崿F(xiàn)拍照打卡功能 本文實例為大家分享了微信小程序?qū)崿F(xiàn)拍照打卡的具體代碼,供大家參考,具體內(nèi)容如下 由于拍照組件是相當于一個塊,用隱藏顯示的方法不太好,為了更好的用戶交互,選擇了在一個新的頁面調(diào)用相機組件,上傳圖片并保存打卡數(shù)據(jù)的方式. 小程序端 簽到頁面wxml <view class="signBtn" bindtap="signSubmit"> ? <view>{{signTime}}</view> ? <view>打卡簽 ...

• JS中Math對象用法是什么，提供哪些數(shù)學方法

  本篇文章給大家?guī)砹岁P(guān)于javascript的相關(guān)知識，其中主要介紹了關(guān)于Math對象方法的相關(guān)問題，Math對象是JavaScript的內(nèi)置對象，提供一系列數(shù)學常數(shù)和數(shù)學方法，該對象不是構(gòu)造函數(shù)，所以不能生成實例，所有的屬性和方法都必須在Math對象上調(diào)用，下面一起來看一下，希望對大家有幫助。