zoukankan      html  css  js  c++  java
  • 如何使用vue-table-with-tree-grid树形表格组件

    如何使用vue-table-with-tree-grid树形表格组件
    1、假如遇到了一个需要搭建一个树形结构的表格页面,这时候vue-table-with-tree-grid便可以派上用场。示例如下。

    在这里插入图片描述

    2、如果你是使用vue ui搭建的项目,使用时操作如下;

    ​ 2.1: 在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装

    ​ 2.2:打开main.js,导入vue-table-with-tree-grid

        import TreeTable from 'vue-table-with-tree-grid'
        .....
        Vue.config.productionTip = false
    
    • 1
    • 2
    • 3

    ​ 2.3:全局注册

    //全局注册组件
    Vue.component('tree-table', TreeTable)
    
    • 1
    • 2

    ​ 2.4使用组件展示分类数据

    <!-- 分类表格
    :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">
    
    </tree-table>
    3、如果你是使用 vue create my-project 搭建项目,使用时操作如下。

    ​ 3.1:安装

    npm i vue-table-with-tree-grid -S

    ​ 3.2:打开main.js,导入vue-table-with-tree-grid

        import TreeTable from 'vue-table-with-tree-grid'
        .....
        Vue.config.productionTip = false
    

    ​ 3.3:全局注册

    //全局注册组件
    Vue.component('tree-table', TreeTable)

    ​ 3.4使用组件展示分类数据

    <!-- 分类表格
    :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">
    
    </tree-table>



    更多方法属性:
    https://www.npmjs.com/package/vue-table-with-tree-grid




  • 相关阅读:
    winform笔记
    深度GHOST安装,GHOST完毕后不能启动继续
    CSS+JS;JS+CSS换肤总结
    windows2008配置来
    ul li做标题列表中间出现多的一个空行,重复。
    洛谷P3376 【模板】网络最大流
    洛谷P3387 【模板】缩点
    洛谷P3796 【模板】AC自动机(加强版)
    洛谷P3384 【模板】树链剖分
    洛谷P3919 【模板】可持久化数组(可持久化线段树/平衡树)
  • 原文地址:https://www.cnblogs.com/fsg6/p/14277288.html
Copyright © 2011-2022 走看看