vue-table-with-tree-grid

基于vue+iview 實作treetable

（（（（ 新人光環 ））））

項目中剛剛遇到這種treetable的需求，于是在www.npmjs.com/找到了vue-table-with-tree-grid，上手簡單

隻為了安利，詳細學習請戳連結： 原文連結、 原例子

一個簡單的例子

效果圖

.vue檔案如下

<template hljs-string">"html">
    <zk-table 
        ref="table" 
        sum-text="sum"
        index-text="#" 
        :data="treeTableData.data" 
        :columns="columns" 
        :stripe="props.stripe" 
        :hljs-string">"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">
        <!-- 原文中 scope="scope" 會警告， 2.5版本後應為slot-scope="scope"-->
        <template slot="active" slot-scope="scope">
            <!--  ... ... (圖中對應狀态欄的綠點兒)-->
        </template>
        
        <template slot="empower" slot-scope="scope">
            <!-- ... ... (為授權的圖示，可在這裡添加點選事件)-->
        </template>
    </zk-table>
</template>
<script>
export default {
    name: 'example',
    //表格各行的資料
    data() {
      return {
        props: {
          stripe: false,//是否顯示間隔斑馬紋
          border: false,//是否顯示縱向邊框
          showHeader: true,//是否顯示表頭
          showSummary: false,//是否顯示表尾合計行
          showRowHover: true,//滑鼠懸停時，是否高亮目前行
          showIndex: false,//是否顯示資料索引
          treeType: true,//是否為樹形表格
          isFold: true,//樹形表格中父級是否預設折疊
          expandType: false,//是否為展開行類型表格（為 True 時，需要添加作用域插槽, 它可以擷取到 row, rowIndex)
          selectionType: false,//是否顯示間隔斑馬紋
        },
        data: [
          {
            name: '根組織',
            description: '111',
            owner:'admin',
            active: true,
            children: [
              {
                name: '大中華區',
                description: '',
                owner: '',
                active: true,
                children: [
                  {
                    name: '浙江省',
                    description: '',
                    owner: '',
                    active: true,
                    children: [
                      {
                        name: '杭州市',
                        description: '',
                        owner: '',
                        active: true
                      }
                    ]
                  }
                ]
              }
            ],
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
          },
        ],
        //表格标題資料
        columns: [
            {
                label: "使用者組名",
                prop: "name"
            },
            {
                label: "描述",
                prop: "description",
                minWidth: "50px"
            },
            {
                label: "所有者",
                prop: "owner"
            },
            {
                label: "狀态",
                prop: "active",
                type: "template",
                template: "active"
            },
            {
                label: "授權",
                type: "template",
                template: "empower"
            }
        ]
      };
    }
  };
</script>
複制代碼
           

table 可配置的屬性

屬性	說明	類型	參數	預設值
data	表格各行的資料	Array	-	[]
empty-text	表格資料為空時顯示的文字	String	-	'暫無資料'
columns	表格各列的配置	Array	-	[]
show-header	是否顯示表頭	Boolean	-	true
show-index	是否顯示資料索引	Boolean	-	false
index-text	資料索引名稱	String	-	'序号'
show-summary	是否顯示表尾合計行	Boolean	-	false
sum-text	表尾合計行首列名稱	String	-	'合計'
summary-method	表尾合計行計算方法	Function	data, column, columnIndex	-
max-height	最大高度	[String, Number]	-	'auto'
stripe	是否顯示間隔斑馬紋	Boolean	-	false
border	是否顯示縱向邊框	Boolean	-	'false'
show-row-hover	滑鼠懸停時是否高亮目前行	Boolean	-	true
tree-type	是否為樹形表格	Boolean	-	false
children-prop	樹形表格中周遊的屬性名稱	String	-	children
is-fold	樹形表格中父級是否預設折疊	Boolean	-	true
expand-type	是否為展開行類型表格（為 True 時，需要添加名稱為 '$expand' 的作用域插槽, 它可以擷取到 row, rowIndex)	Boolean	-	false
selection-type	是否為多選類型表格	Boolean	-	false
row-key	行資料的 Key，用來優化 Table 的渲染	Function	row, rowIndex	rowIndex

Columns 可配置的屬性

屬性	說明	類型	預設值
label	列标題名稱	String	''
prop	對應列内容的屬性名	String	''
align	對應列内容的對齊方式，可選值有 'center', 'right'	String	'left'
headerAlign	對應列标題的對齊方式，可選值有 'center', 'right'	String	'left'
width	列寬度	[String, Number]	'auto'
minWidth	列最小寬度	[String, Number]	'80px'
type	列類型，可選值有 'template'(自定義列模闆)	String	''
template	列類型為 'template'(自定義列模闆) 時，對應的作用域插槽（它可以擷取到 row, rowIndex, column, columnIndex）名稱	String	''

（... ...省略号，不行了，點原文連結查詢所有api）

總結

在使用vue-table-with-tree-grid之前，我嘗試iview自帶的table展開來做這個功能

iview-table

table展開後判斷樹形資料中是否有children。

如果有，展開後還是一個 可展開的table。

若果沒有，設定該資料_disableExpand，禁用展開

剛開始資料隻有三個層級時，完全可以，但資料增加到7個時（具體多少個，沒去研究）浏覽器會報一個大概是無限循環的錯。具體原因還沒有去鑽研。

項目緊急，在找到vue-table-with-tree-grid後，僅用不到半天的時間，便實作了。

帶着感激之情安利開源。

長

.

.

.

.

.

.

.

.

. 出一口氣