基于vue element table 分级显示

最新推荐文章于 2024-05-30 10:40:47 发布
最新推荐文章于 2024-05-30 10:40:47 发布
阅读量4.3k 收藏 3
点赞数 2
分类专栏： 分享 文章标签： vue element table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38818429/article/details/89971147
版权

前一阵子我们的产品出了迭代的需求，然后我成功的从angular 转到 vue 了（吐槽一下）
然后有一个需求是这样的
在这里插入图片描述
一级部门 二级部门 领导 相关人员
数据格式如下 ：
在这里插入图片描述
那element table 不接受二维数组，那我应该怎么去实现这个呢
在这里插入图片描述
我可能使用了笨办法，重新组织了一下数据的结构，first 代表以及，last 代表二级，这个好处就是你想要什么就可以有什么去拿什么值，（个人表达不是很准确，欢迎指出不足）

我就是胖虎
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui中树形表格切换展开不同层级
蜗牛~~
08-19 2355
elementui中树形表格切换展开不同层级。
实现表单四级嵌套 点击展开发送请求实时获取下一级数据
m0_73267676的博客
08-30 177
思路是第一层el-table为总数据 为oneList，第二层运用el-table-column type="expand" 插入props插槽 通过expand-change（点击展开方法）在此方法里发送请求与后台交互获取第二层数据 通过expand-change方法返回的row（该点击的子项数据）里的id 循环找到oneList对应的子项插进去。页面需求是根据工单类型不同 分为三级嵌套和四级嵌套，且点击展开实时发送请求获取数据，最后一级统一为标签页且点击标签页发送请求。
Vue+Element实现表格编辑、删除、以及新增行的最优方法
10-16
主要为大家详细介绍了Vue+Element实现表格的编辑、删除、以及新增行的最优方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue2 + Element UI 封装 Table 递归多层级列表头动态
FitnessSnail的博客
05-30 429
【代码】Vue2 + Element UI 封装 Table 递归多层级列表头动态。
[element-ui]对el-table表格进行排序、分页、过滤
xxuxioxx的博客
10-07 1956
汇总一些表格的常用方法，比如排序过滤分页等等
Element表格多数据展示如何以、间隔区分数据
派大星儿的博客
02-28 514
Element表格多数据展示如何以、间隔区分数据 <el-table-column prop="estates" align="center" label="绑定楼盘" width="400"> <template slot-scope="scope"> <b v-for="(item,i) in scope.row.estates"><b v-if="i != 0">、</b>{{item.name}}</b> &lt
element组件table实现点击展开子表格
weixin_50520054的博客
10-21 5942
最近在做一个项目是有关年级以及班级列表管理的，如： element组件默认是点击前面的那个箭头就可以展开当前行下面包含的内容了，但现在我想点击添加班级下面的班级列表也可以展开现在应该怎么做呢？实现效果如下： 以下是代码区 1.首先我们要给表格的每一行添加一个key值 <!--页面代码start--> <el-table :row-key="getKey" :expand-row-keys="expandKeys">
实现三级分类列表展示，查看下一级
待定
03-27 2785
实现三级分类列表展示，查看下一级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>category管理</title> <meta http-equiv="X-UA-Compatible" content...
vue element table中自定义一些input的验证操作
10-15
总结来说，Vue Element UI中的`el-form`和`el-table`结合使用，通过`rules`属性和`prop`属性可以方便地实现表单验证，特别是对于动态表格数据的验证。通过`validate`方法可以在提交表单前进行完整的验证检查，确保...
基于vue element ui 的动态table组件
06-03
标题中的“基于vue element ui 的动态table组件”指的是利用Vue.js和Element UI库，设计一个可配置、可扩展的表格组件。这个组件能够根据不同的业务需求，动态调整列的显示、排序、筛选等功能，从而避免在多个页面中...
基于Vue和Element的低代码平台设计源码
05-31
低代码平台项目源码，共821个文件，采用Javascript、Vue、CSS和HTML等语言开发。该平台基于Element UI组件库，旨在提供一种快速、高效的开发方式，让开发者能够更专注于业务逻辑而非技术实现。
vue Element ui实现table列拖动效果
11-07
Element UI 是基于 Vue 的一套组件库，提供了丰富的界面元素，包括表格（Table）等，帮助开发者快速构建用户界面。在实际开发中，我们常常会遇到需要自定义交互效果的需求，比如使表格的列可以拖动调整顺序。本篇...
vue element-ui table 组件封装使用
最新发布
06-07
在Vue.js开发中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，包括我们今天要讨论的Table组件。Table组件在实际项目中经常用于展示数据，但每个项目的需求可能各不相同，因此对其进行封装能...
基于element-plus2.5.10 table组件实现分类table
个人博客
10-28 2553
思路很重要
element ui - el-table数据排序
nunumaymax的博客
11-01 6523
后台一次性返回全部数据，需要对所有数据进行排序
Vue后台表格三级分类树形结构插件vue-table-with-tree-grid
qq_39237850的博客
04-16 2827
基于vue，如下图所示，要实现表格里面的三级分类，用vue-table-with-tree-grid插件比较好，vue-table-with-tree-grid官方说明及用法在https://github.com/MisterTaki/vue-table-with-tree-grid（本人小白一个，暂时在此为了记录一些知识），直接上代码及对应的效果图： ...
vue中Element-ui 表格 (Table)合并行、列单元格
weixin_44979432的博客
01-15 4343
一、前言 注：因为个人公司项目需要处理table表格重复数据多个单元格显示。现已合并。效果如下： 二、代码 <template> <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%;text-align:center;border:1px solid #d9d9d9" :cell-st
element table动态合并行、列
weixin_42115781的博客
06-21 515
以上面表格举例，表格需要以服务为主体显示，并且服务的数量不确定，表格数据是 资料对象集合，假设表格数据是按照服务名排序，如下 this.informationData = [ { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的', check: false }, { service: '服务1', name: '营业执照', description: 'u一卡通一会发到付v但是v的',..
Vue2+element-plus 表格el-table前端分页、排序、搜索与加序号
鹤渺的星球
09-19 8330
虽然很多时候后端会把分页，搜索，排序都做好，但是有些返回数据并不多的页面，或者其他原因不能后端分页的通常会前端处理，而前端分页一般会涉及：表格数据的搜索，表格分页，排序，有些需要加一列序号。
vue element table显示图片
05-25
可以使用 Element UI 的 Table 组件中的 `slot-scope` 属性和 `template` 标签来显示图片。 具体步骤如下： 1. 在 Table 组件中设置需要显示图片的列的 `prop` 属性，例如 `image`。 2. 在 Table 组件中使用 `slot-scope` 属性来获取当前行的数据。 3. 在 `template` 标签中使用 `v-bind` 指令来绑定图片的 `src` 属性，例如 `v-bind:src="scope.row.image"`。 以下是一个简单的示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="image" label="Image"> <template slot-scope="scope"> <img v-bind:src="scope.row.image" style="max-width: 100px;"> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', image: 'https://via.placeholder.com/150' }, { name: 'Item 2', image: 'https://via.placeholder.com/150' }, { name: 'Item 3', image: 'https://via.placeholder.com/150' }, ] } } } </script> ``` 在上述代码中，`tableData` 数组中包含了每一行的数据，其中 `image` 属性包含了需要显示的图片的 URL。在 `template` 标签中，使用 `v-bind` 指令来绑定 `img` 标签的 `src` 属性，使其显示当前行的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值