Vue_控件(tree_table)

Vue_控件(tree_table)

要使用tree_table之前要進行依賴的插入，

插入方法可以在vue UI中直接搜索依賴插入

在main.js中導入組件，然后全局定義組件，在使用組件的時候使用

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

在Vue-UI中可以在依賴中點擊查看更多來查看簡述

https://github.com/MisterTaki/vue-table-with-tree-grid

在example文件夾下有一些官方給出的例子

主頁下滑也可以看到tree-table的屬性介紹

下面也說明一些關鍵屬性

data屬性，綁定一個數組

columns：表格各列的配置

<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">
             <i class="el-icon-success" style="color:lightgreen;"
             v-if="scope.row.cat_deleted==false"></i>
             <i v-else class="el-icon-error" style="color:red;"></i>

         </template>
         
         </tree-table>

在data中放入template的定義

columns:[
                {label:'分類名稱',prop:'cat_name'},
                {label:'是否有效',type:'template',template:'isok'}
            ]

第一列並沒有給出模板，所以時普通列，在prop中寫下列中的一個屬性，內容為catelist.cat_name

在template中的solt表示了模板的名字和prop對應

第二列使用了模板isok，也可以看的到v-if和v-else的使用

:selection-type="false"  勾選框
:expand-type="false"   
show-index
index-text="#"  排序索引，排序列的列名
 border   縱向邊框
 :show-row-hover="false" 取消觸碰高亮