element table表格行展开列表的实现(1)，HTML表格标签

于 2024-04-03 06:41:54 发布
阅读量880 收藏 24
点赞数 15
分类专栏： 程序员 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79655473/article/details/137320194
版权

难点

  • element UI 并没有可以照搬的，只能我们自己对样式修改还原

  • 下面展开的项 能够和上面 对齐

  • 自适应屏幕缩放

已实现效果

========================================================================

在这里插入图片描述

屏幕自适应

最低0.47元/天 解锁文章
2301_79655473
关注
  • 15
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html标签table自动增加行,给表格添加行的标签
weixin_29119475的博客
06-01 2147
表格标签如何添加一个新的？加了个新数据，但是标签一直不知道怎么添加1个和其他一样的从Windows的“开始”菜单里，找到excle2010，或者右键新建一个excel文档。 单击工作表边上的“+”号。随后会在现有工作表旁创建一个新的空白工作表。 也可以按⇧ Shift+F11在所选工作表的前面插入一个新的工作表。javascript中如何自动给表添加行和列/********************...
使用element-ui table expand展开行实现手风琴效果
01-21
问题讲解： 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图 可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的
使用 Element UI Table 的 slot-scope方法
12-30
在 Element UI Table 的官网上，有一个“筛选”功能，里面可以利用 slot-scope，给表格记录打标签。 关键代码为： {{scope.row.tag}} 这里首先利用 slot-scope 属性（Vue 2.6.0 已废弃）将子组件的数据（row.tag）传递给了父组件。 利用三元表达式为
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue+Element实现表格编辑、删除、以及新增行的最优方法
12-11
之前已经实现了表格的新增、编辑和删除，在我的上篇文章中写的也比较详细。但是总感觉有点不完美，首先新增了一行以后，必须要双击某一个单元格参能进行内容的输入。从代码上来说，代码量也较大；而且使用的是原生的html标签，有点尴尬。 于是，进一步研以后，进行了一定的优化，直接使用vue的代码实现，不仅大大减少了代码量，还实现了操作的友好性。下面直接上代码： 1 html部分 这次的优化其实主要在于html部分，直接将vue的el-input标签或者el-select标签放入表格的每个单元格中。这样就不用去考虑表格内容的编辑问题了。 <el-form :model="inServForm" ref="
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
主要介绍了vue+elementui实现点击table中的单元格触发事件--弹框，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html表格展开明细,Element-ui的Table表格展开行功能
weixin_33680199的博客
05-31 664
业务需要表格能够展开某一行，但组件中只能展开所有行，或者用table的树形数据(row 中需包含 children字段)，可以通过控制 row-class-name来定义表格中需要展开的行。通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容:row-class-name="setClassName":...
element-ui table 实现表格展开行每次只能展开一行
业余前端的职业经历
01-09 4436
因为工作需要吗 element-ui中展开式表格虽然用着方便 但是 用过的童鞋 可能知道 只有点击展开的时候 下面的 元素我们才能获取到 同时每一行下面展开的 是使用 slot-scope 内容分发 共用的一套 模板 这就很尴尬了 打个比如 ：我展开下面的是视频 那么所有行展开下面都是视频 我只能获取一次 视频标签 这下就悲催了 点击一下 所有行下面的视频同时 播放 又同时暂停 做过的童...
element-ui中table表格标签编辑功能的实现
qq_46178473的博客
12-07 2149
element-ui表格编辑
vue+element-ui实现表格编辑
热门推荐
liaoxuewu的博客
07-24 8万+
两种实现方式 1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 html中的代码： &amp;amp;amp;amp;amp;amp;lt;el...
vue+element-ui实现表格编辑的三种实现方式
01-19
1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 页面结构代码： <el-table-column width=
vue+element实现表格新增、编辑、删除功能
01-19
需要做一个需求：新增一个xml文件时，添加数量不确定、属性相同的xml标签，想了想可以用表格做啊，属性相同，使用统一的表头，下面的属性值只是进行增删改不就行了，就类似于mysql给表里填数据一样。 可是目前似乎还没有表格的直接增删改一行的操作，那要怎么实现呢？于是，通过上网以及自己的思考，终于实现了，代码、思路以及效果图如下： 1 html部分： <el type=success click=addRow(tableData)>新增</el> <template> <el-table :data=tableData style=width:
JavaScript DOM操作表格及样式
12-12
一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption'); table.appendChild(caption); caption.appendChild(document.createTextNode('人员表')); va
vue+element-ui表格封装tag标签使用插槽
10-15
主要介绍了vue+element-ui表格封装tag标签使用插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【JavaScript源代码】vue 中使用 vxe-table 制作可编辑表格的使用过程.docx
12-29
vue 中使用 vxe-table 制作可编辑表格的使用过程 　　项目上有一个表格需要实现在线编辑，开始用了 element 的el-table 实现，单元格内基础情况就是监听了单击单元格切换一个span标签与input标签，复杂点的单元格使用了大量的条件判断来实现对应的编辑操作，比如下拉选，popover弹框编辑。整个表格几十列，十几条数据就已经出现了明显的卡顿，在做了诸多操作（比如el-input使用原生input替换、减少判断、减少频繁的数据切换等）之后，速度虽然有所提升，但是还是肉眼可见的卡顿，基本不可用。然后便转战vxe-table，重写了一遍这个表格。 （别问我为什么不直接用更好的
element表格固定某一行_element table改指定行或列的样式
weixin_40007515的博客
12-19 1610
如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式，可以通过以下方式实现例如，要求表格第一列 ，左内边距 40px通过设置 el-table的cell-style、header-cell-style 实现，element 官网 有如下介绍首先，首先先写好回调方法，因为在项目的 多个地方会用到这个逻辑，所以，我将这个函数放到js文件中，用混合 (mixins) 去分发 (mix...
Element el-table标签 表格高度自适应
a5252145的博客
08-23 6990
Element el-table标签 表格自适应 el-table标签中绑定高度属性 :height="tableHeight" 在data中定义表格自适应高度：tableHeight: window.innerHeight - 200
element-ui实现table表格的嵌套（table表格嵌套）功能实现
yehaocheng520的博客
05-19 3万+
最近在做电商类型的官网，希望实现的布局如下：有表头和表身，所以我首先想到的就是table表格组件。 表格组件中常见的就是：标题和内容一一对应： 像效果图中的效果，只用基础的表格布局是不行的，因此我想到了table表格中的展开功能： 然后通过：默认展开所有行 然后在里面的表格table中默认隐藏表头： 其他的则需要通过样式进行实现了 element-ui中table表格的嵌套（代码部分） <el-table v-bind:data="tableData" :default-expand-al
element table表格实现编辑并后台提交数据
最新发布
05-31
要实现element table表格的编辑并后台提交数据，你需要进行以下几个步骤： 1. 在表格中添加编辑功能，可以通过设置`edit-config`属性来启用编辑功能： ``` <el-table :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> ... </el-table> ``` 2. 在`el-table-column`标签中添加`prop`属性来绑定数据，同时将`editable`属性设置为`true`来启用编辑功能： ``` <el-table-column prop="name" label="Name" :editable="true"></el-table-column> <el-table-column prop="age" label="Age" :editable="true"></el-table-column> <el-table-column prop="address" label="Address" :editable="true"></el-table-column> ``` 3. 监听表格的`cell-click`事件，在事件处理函数中获取点击的单元格的数据： ``` <el-table @cell-click="handleCellClick" ...> ... </el-table> methods: { handleCellClick(row, column, cell, event) { console.log(row, column, cell, event) } } ``` 4. 在事件处理函数中弹出一个对话框，让用户输入需要修改的数据，然后将修改后的数据提交到后台： ``` <el-dialog :visible.sync="dialogVisible"> <el-form :model="formData"> <el-form-item label="Name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="Age"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="Address"> <el-input v-model="formData.address"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="submitData">Submit</el-button> </div> </el-dialog> data() { return { dialogVisible: false, formData: {} } }, methods: { handleCellClick(row, column, cell, event) { this.formData = { ...row } this.dialogVisible = true }, submitData() { // 将修改后的数据提交到后台 axios.post('/api/update', this.formData) .then(response => { // 处理提交成功的逻辑 this.dialogVisible = false }) .catch(error => { // 处理提交失败的逻辑 }) } } ``` 这样，就可以实现element table表格的编辑并后台提交数据了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值