vue中使用vue-table-with-tree-grid实现商品的分类显示（table-tree）

最新推荐文章于 2024-04-29 04:28:15 发布
最新推荐文章于 2024-04-29 04:28:15 发布
阅读量866 收藏 14
点赞数 19
分类专栏： 程序员 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092868/article/details/137378787
版权
本文介绍了如何在Vue项目中利用vue-table-with-tree-grid插件展示商品分类。通过vue ui下载项目，引入TreeTable组件，设置相关属性如data、columns，实现商品列表的树形展示。同时，文章提供了代码示例和整体结构，强调了前端开发者持续学习和积累的重要性。
摘要由CSDN通过智能技术生成

1.1可以通过vue ui在项目管理器中下载项目，具体流程如下：

点击查看详情可以查看这个插件的相关使用以及demo

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

2.使用插件

根据官方的介绍，聚义有两种使用方式，这里采用的第二种

2.1 引入：

import TreeTable from ‘vue-table-with-tree-grid’

Vue.component(‘tree-table’, TreeTable)

最低0.47元/天 解锁文章
2401_84092868
关注
专栏目录
vue-table-with-tree-grid的使用
TodayStartWJH的博客
02-20 760
1、下载 npm i vue-table-with-tree-grid -S 2、引入(一般是使用第一个) import Vue from 'vue' import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable) Or import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid' Vue.use(ZkTable)
vue-table-with-tree-grid：用于Vue.js 2.0的表（带有tree-grid）组件。 （其样式扩展了@iView）
02-06
带树网格的VUE表 Vue.js 2.0的表格（带有树网格）组件。 （其样式扩展了 ） 例 安装 使用npm： npm i vue-table-with-tree-grid -S 或使用纱线： yarn add vue-table-with-tree-grid 用法 import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid' Vue . use ( ZkTable ) 要么 import Vue from 'vue' import ZkTable from 'vue-table-with-tree-grid'
vue-table-with-tree-grid
Gx754649的博客
07-18 374
vue-table-with-tree-grid
vue-table-with-tree-grid_树形表格组件_vue
gaogzhen的博客
12-05 1344
vue-table-with-tree-grid_树形表格组件_vue 目录 文章目录1、常用属性2、应用场景***后记*** ： 内容 1、常用属性 table 名称 类型 取值 默认值 描述 data Array - [] 表格各行数据，层级数据 columns Array - [] 表格各列的配置（具体见下文：Columns Configs） show-index Boolean - false 是否显示数据索引 index-text String - ‘序号
Vue后台表格三级分类树形结构插件vue-table-with-tree-grid
qq_39237850的博客
04-16 2940
基于vue，如下图所示，要实现表格里面的三级分类，用vue-table-with-tree-grid插件比较好，vue-table-with-tree-grid官方说明及用法在https://github.com/MisterTaki/vue-table-with-tree-grid（本人小白一个，暂时在此为了记录一些知识），直接上代码及对应的效果图： ...
vue 项目接入 markdown(1)
最新发布
2401_84437170的博客
04-29 564
空(void)元素有那些？⾏内元 素和块级元素有什么区别？cookies,sessionStorage,localStorage 的区别？Doctype作⽤?serviceWorker的使用原理是啥？问：0.1 + 0.2 === 0.3 嘛？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？
表格树vue-table-with-tree-grid
qq_47410017的博客
09-05 462
表格树vue-table-with-tree-grid 在vue可视化面板中安装依赖vue-table-with-tree-grid 下面为github的网站 https://github.com/MisterTaki/vue-table-with-tree-grid 导入插件 在main.js入口文件中进行导入 使用component进行导入插件 // 配置表格树 import TreeTable from 'vue-table-with-tree-grid' // 把表格树注册到全局 Vue.c
vue中使用vue-table-with-tree-grid实现商品的分类显示（table-tree）(2)
2401_84446580的博客
04-27 162
border
vue-table-with-tree-grid-树形表格组件
热门推荐
gaogzhen的博客
08-18 1万+
vue-table-with-tree-grid-树形表格组件 目录 文章目录1、简介2、详解2.1、table 常用属性2.2、columns 配置3、示例***后记*** ： 内容 1、简介 应用场景：需要展示表格数据，表格数据中有分级或者树形结构的数据。 效果图示1-1： 官方地址：https://github.com/MisterTaki/vue-table-with-tree-grid,有详细使用示例。 2、详解 2.1、table 常用属性 属性名 类型 参数 默认 描述
Vue中使用vue-table-with-tree-grid表格插件
12-09 676
一、下载 cnpm i -S vue-table-with-tree-grid 二、全局引入 import TreeTable from 'vue-table-with-tree-grid' Vue.component('tree-table', TreeTable) 三、使用 <template> <div> <el-card> <tree-table :border="true" :show
Vue 商品分类模块(展示商品分类列表+分页)
weixin_47906106的博客
02-23 7129
获取商品分类信息 components=>新建文件夹goods=>Cate.vue index.js 配置路由 接口文档 响应数据 { "data": [ { "cat_id": 1, "cat_name": "大家电", "cat_pid": 0, "cat_level": 0, "cat_deleted": false,
推荐开源项目：Vue Table with Tree Grid
gitblog_00046的博客
04-11 521
推荐开源项目：Vue Table with Tree Grid 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个强大的 Vue.js 组件，它将表格和树形结构相结合，为数据展示提供了一种灵活且直观的方式。该项目旨在解决在复杂数据组织中，既要展示表格形式的信息，又要处理嵌套数据的问题。通过此组件，开发者可以轻松地创建出具有折叠/展开功能，层次清晰的数据表格。 技术分...
树形表格组件＜vue-table-with-tree-grid＞的使用
qq_49575831的博客
02-22 1723
使用＜vue-table-with-tree-grid＞搭建树形结构的表格页面
vue-table-with-tree-grid的max-height
05-24
`vue-table-with-tree-grid` 是一个 Vue.js 的表格组件，它可以用于显示树形结构的数据。`max-height` 是一个 CSS 属性，用于设置元素的最大高度。在 `vue-table-with-tree-grid` 中，`max-height` 属性可以用于设置表格的最大高度，以便在表格数据过多时进行滚动。 具体来说，在 `vue-table-with-tree-grid` 中，可以通过设置 `height` 或 `max-height` 属性来控制表格的高度。如果设置了 `height` 属性，则表格的高度固定为该值；如果设置了 `max-height` 属性，则表格的高度可以自适应内容，但不会超过该值。 例如，下面的代码演示了如何将 `max-height` 属性设置为 `300px`： ```html <vue-table-with-tree-grid :data="data" :columns="columns" :max-height="300"></vue-table-with-tree-grid> ``` 这样，当表格的内容高度超过 `300px` 时，表格会出现垂直滚动条，以便用户可以查看所有内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值