DIV实现部门层级表格样式，可替代el-table单元格合并行列效果

已于 2023-04-06 16:12:09 修改
阅读量304 收藏
点赞数
文章标签： vue.js elementui css 前端
于 2023-03-29 17:14:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35357374/article/details/129841098
版权

由于项目需要，需要用表格样式展示多级部门及员工信息，table组件多次尝试后未能成功，因此通过div的方式实现了该效果

以下为效果图

以下为部分代码 ，需要完整代码的话评论区看到会回的

 

qq_35357374
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-ui中Table表格省市区合并单元格的方法实现
01-19
本文介绍了element-ui中Table表格省市区合并单元格的方法实现，分享给大家，具体如下： 效果如图 代码如下: <div> <el inline=true model=formInline class=demo-form-inline> <el label=搜索> <el v-model...
前端合并单元格（行合并、列合并）
竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生
03-17 6696
原生js实现表格的行合并列合并
零基础HTML入门教程(15)——合并单元格
weixin_61808806的博客
12-06 1990
我们上小节学习了表格，以及他的基本使用，那我们这一小节学习一下，合并单元格，并熟练使用。合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格） 效果如下 我们可以看到，表格合并了，为什么要学习表格合并那，因为我们再平时做表格的时候合并表格可以是他更容易看清内容使内容清晰，我们熟练掌握合并标签。
使用div+css实现表格布局
徐同保的专栏
01-03 4247
使用div+css实现表格布局
表格合并单元格
web_sunn的博客
02-13 499
【代码】表格合并单元格。
用div来代替table
wsgzjdbb的博客
07-01 2232
用div来代替table概述实战 概述 table是我们日常开发中经常用到的HTML标签，但我们也经常因为table饱受折磨，原生的table的样式丑出天际，第三方框架的样式可能样式是好看点了，但可能并不是我们想要的样子。面对这些情况，我觉得自己用div写去一个table是一个很好的方法，样式全部可按照自己想要的样子调整。 实战 首先贴出全部代码： <!DOCTYPE html> <html> <head lang="zh"> <meta charset="u
el-table无限滚动+控制列是否显示+列排序（非json）
01-06
在这个特定的案例中，我们关注的是如何实现`el-table`的无限滚动、列显示控制以及非JSON方式的列排序。下面将详细阐述这些功能的实现方法。 首先，**无限滚动**是提高用户体验的一种常见技术，特别是在处理大量数据...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
`el-table`接受`data`属性来绑定数据源，`border`属性用于添加边框样式，而`style="width: 100%"`则设置表格宽度为100%以占据容器的全部宽度。 ```html <el-table :data="tableData" border style="width: 100%"> `...
bootstrap table实现单击单元格可编辑功能
12-10
在本文中，我们将深入探讨如何使用Bootstrap Table与x-editable插件来实现表格中的单元格单击可编辑功能。Bootstrap Table是一款流行的、响应式的、基于HTML5和jQuery的数据展示插件，它允许用户自定义列、排序、...
VUE+elementui组件在table-cell单元格中绘制微型echarts图
12-28
-在table表格中 根据 scope.$index动态设置元素的id ，便于指定单元格的echarts初始化； -在单元格中触发一个方法，传入当前的scope.row数据或者指定其他数据，并且传入 scope.$index 以及一个字符串便于识别当前是...
css（5）
m0_62520946的博客
02-13 471
目录 背景 background-color 设置背景颜色 background-image 设置背景图片 background-position 用来设置背景的位置 线性渐变 径向渐变（） radial-gradient（） 表格 长表格 样式 表单 背景 background-color 设置背景颜色 background-image 设置背景图片 可以同时设置背景图片和背景颜色，这样背景颜色会成为图片的背景 如果图片小于元素，则背景图片会铺满背景颜色 ...
使用div制作表格效果
GTC的博客
10-24 4114
使用div制作表格效果
单元格合并
qq_40281275的博客
08-21 155
&lt;div align="center"&gt; &lt;table border="1px"&gt; &lt;tr&gt; &lt;td rowspan="3"&gt;11&lt;/td&gt; &lt;td&gt;12&lt;/td&gt; &lt;td&g
使用div利用布局实现表格的效果
LANCE的博客
12-19 3383
使用div利用布局实现表格的效果加粗样式 html代码 <div class="table"> <div class="thead"> <div class="tr"> <div class="th"> ...
html css div开发table表格
bluemengcom的博客
06-11 1203
html css div开发类似table表格
使用原生div制作table表格
兔子的博客
12-02 2180
在移动使用横屏表格功能，横屏后无法实现同向滚动功能，此时使用div制作table，实现容器内的滚动
vue 仿el-table原理实现表格
shaoduo的博客
01-11 4292
element-ui是非常不错的开源框架，el-table组件在element-ui整个框架中是最复杂、最重要的部分。其中涉及到的知识有JSX，render渲染函数，组件间的状态管理等等。出于好奇和挑战，在网上受教于el的源代码以及网上相关内容资料。完成了一个简单基础的table组件 取名为 sd-table。 支持功能： 自定义列、支持自定义插槽、支持自定义排序、支持全选、多选、分页回调、宽高样式等。 1.效果图 2.代码 2.1 sd-table-body.js ...
原生设置table样式
grylf的博客
03-08 1260
<div> <div class="ui-table-head"> <table class="ui-table"> <colgroup> <col style="width:10%"> <col style="width:55%"> .
h5页面编写原生table表格，并调整表格样式？
SM_Cute的博客
07-06 1243
h5页面编写原生table表格，并调整表格样式？
el-table单元格中选择日期 el-date-picker
最新发布
12-23
el-table是Element UI中的一个表格组件，el-date-picker是Element UI中的一个日期选择器组件。在el-table的单元格中使用el-date-picker可以实现在表格中选择日期的功能。 下面是一个示例代码，演示了如何在el-table的单元格中使用el-date-picker选择日期： ```html <template> <div> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="date" label="日期"> <template slot-scope="scope"> <el-date-picker v-model="scope.row.date" type="date" placeholder="选择日期"></el-date-picker> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', date: '' }, { name: '李四', date: '' }, { name: '王五', date: '' } ] }; } }; </script> ``` 在上面的代码中，我们使用了el-table组件和el-date-picker组件。在el-table-column的模板中，我们使用了slot-scope来获取当前行的数据，并将el-date-picker绑定到该行的date属性上。这样，每个单元格中都会显示一个日期选择器，用户可以通过选择日期来更新表格中的日期数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值