Vue_控件(tree_table)

标签：href   row   imp   expand   lazy   error   get   loading   data   

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" 取消触碰高亮

Vue_控件(tree_table)

标签：href   row   imp   expand   lazy   error   get   loading   data   

原文地址：https://www.cnblogs.com/ju-ruo/p/14925053.html