樹形結構表vue-table-with-tree-grid的使用

1.安裝

2.在main.si中導入使用

//全局使用
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
 
Vue.use(TreeTable)
           

或者：

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
           

3.使用元件展示分類資料

//分類表格
//:data(設定資料源) :columns(設定表格中列配置資訊) :selection-type(是否有複選框)
//:expand-type(是否展開資料) show-index(是否設定索引列) index-text(設定索引列頭)
//border(是否添加縱向邊框) :show-row-hover(是否滑鼠懸停高亮) 
    
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false">

//主要看上面的樹形代碼
 <!-- 是否有效自定義插槽 -->
        <template slot="isOk" slot-scope="scope">
          <div>
            <i class="el-icon-success" style="color: lightgreen"
              v-if="scope.row.cat_deleted === false"></i>
            <i class="el-icon-error" style="red" v-else></i>
          </div>
        </template>
        <!-- 排序自定義插槽 -->
        <template slot-scope="scope" slot="order">
          <el-tag type="primary" v-if="scope.row.cat_level === 0">一級</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level === 1">二級</el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level === 2">三級</el-tag>
        </template>
        <!-- 操作自定義插槽 -->
        <template slot="handle">
          <el-button size="mini" type="primary" icon="el-icon-edit">編輯</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
        </template>
</tree-table>
           

data中：

data(){
return {
//發請求時需要用到的參數
qureInfo: {
        type: 3, // 這個是傳遞給後端，所我們要幾級分類的資料
        pagenum: 1, //這個是分頁必須要用的 目前頁碼值
        pagesize: 5, // 這個是分頁插件 每頁顯示的資料條數
      },
 cateList: [],
 columns: [
        { label: "分類名稱", prop: "cat_name",},
        {label: "是否有效",prop: "cat_deleted",type: "template",template: "isOk",},
        {label: "排序",type: "template",template: "order",},
        {label: "操作",type: "template",template: "handle",},
      ],
  }
}
           

更多屬性請參考：https://www.npmjs.com/package/vue-table-with-tree-grid