实习总结第七谈-----------vue中element-ui的表格行高怎么控制

最新推荐文章于 2024-05-29 14:59:22 发布
原创 最新推荐文章于 2024-05-29 14:59:22 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element-UI #Table #vue

依旧在我负责的当前项目中举例子：

我的表格要求是一页只显示10条数据，且纵向不能产生滚动条，这样就意味着不能设置表格的整体高度来控制，那样会会产生滚动条，要么在表格纵向产生滚动条，要么在屏幕纵向产生滚动条，这时候我就想到了控制表格每一行的高度降低，就不会 十条数据就产生滚动条了，方法如下：

一：定义一个table表格的style 的回调方法，如图

该方法是element插件中的文档有的固定方法

二:将该方法绑定在要控制行高的表格上：

在表格头部绑定控制行高的函数

三：表格行高被控制后的效果图：

控制行高的效果图，没有产生滚动条

温馨提示：                  

最低0.47元/天 解锁文章

200万优质内容无限畅学
element ui 表单 type=“textarea“ 如何固定行高
weixin_47534571的博客
12-11 3589
使用 标签内添加 :rows 属性,指定行高就行 <el-input v-model="data" type="textarea" :rows="4" placeholder="请输入内容" />
element -plus /ui 设置 table组件 行高
零之使魔@初ꦿঞ
02-14 4429
elementUi表格行高问题解决方案
clownalan的博客
01-28 4162
elementUi表格行高如何过小设置的解决方案
vue3.0 elementplus el-table自定义指令自动计算table高度 及分页大小
啊狸！
11-17 1862
main.ts 注册全局指令。
elementUI的行高设置
qq_51288495的博客
05-16 5424
它是一个函数，所以可以用函数的方式调用哦！在前端开发时，难免用到表格，而最流行的后端组件库。这段代码我们要去调它的行高，怎么调呢？
element-ui el-table调整行高的方法
棠樾的博客
07-20 3800
根据element-ui 的API中的属性 缩小：行高到一定程度之后便不能缩小 升高：开发中没试过最大多少，但行高的高度完全可以调到自己适合的高度 cell-style="padding:0"这列有的园主说可以不用加，只是在缩小到最小不能再缩的时候加，但是我在做的时候不加这个属性完全不起效果 ，所以我缩小行高到45px的时候也要加上 主要是这两句代码 :row-style="{heigh...
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
10-19
本文将介绍如何使用Vue.js框架结合Element-ui组件库实现一个带有远程搜索功能和自定义显示模版的输入框组件。我们将通过HTML、JavaScript以及CSS三种代码部分来实现这个功能。 首先，我们需要了解Element-ui中的`el...
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在使用VUE2.0结合ElementUI2.0框架开发过程中，经常会遇到需要让表格控件自适应浏览器窗口高度的需求，同时保持表头固定，并在内容超出时显示滚动条。ElementUI为el-table元素提供了直接设置高度（height）属性的...
Vue项目中quill-editor带样式编辑器的使用方法
12-09
7. **与Element-UI集成**： 如果你的项目使用了Element-UI，可以利用其提供的`el-upload`组件来实现文件上传的功能。例如，你可以设置`:action`指向你的服务器接口，`:before-upload`回调用于预处理文件，`@success...
详解element-ui表格中勾选checkbox，高亮当前行
10-16
本文主要介绍了在使用Element UI库进行Web开发时，如何实现一个表格组件中勾选复选框并高亮当前行的功能。通过详细分析，读者可以了解到在后台管理系统中常见的一种表格操作需求，并且提供了解决这一问题的思路和...
element el-table 设置行高 和表头高度
小韩要快乐！
05-29 7784
第二种方式el-element-ui的方法。第一种方式 使用css。
elementplus中table表头高度无法缩小问题
qq_41957502的博客
03-08 236
elementplus中table表头高度无法缩小问题
element table 头部行高
weixin_52309490的博客
06-24 1182
element UI里面表格的行高需要自己调整高度和设置padding，直接写style是不行的，里面有 ： 1、row-style （行的 style） 2、header-row-styl（表头行的 style） 3、cell-style（单元格的 style） 如果设置行高或padding直接在表格中写:row-style="height:'32px'"形式也能生效，但是会报错，值为字符串形式不对，需要对象或函数等形式，正确写法如下黑体处： 　　 　　 ...
element ui设置表格表头高度和每一行的高度
岁末zzz的博客
08-03 1万+
填坑记录：今天用element ui的表格组件做用户信息展示，直接拉取的官网的代码过来，发现表头和每一行都太高了，如下： 　因为第一次使用element ui的表格组件，不太清楚会遇到这样的坑，以为能轻松控制高度，于是去百度大佬们的解决办法，也试了好几个，发现改变不了样式，快准备放弃等明天问下项目组的人的时候，看到了一篇文章：https://blog.youkuaiyun.com/u012499506/article/details/81217277（Vue修改element ui table tr th高度以及背景
ElementUI table的行高设置
热门推荐
qq_38950919的博客
07-15 10万+
Q（问题）：elementUI自带的table设置行高A（解决方法）：修改el-table元素中cell-style属性里的padding值为0Example（示例）：默认：&lt;template&gt; &lt;el-table :data="tableData" style="width: 100%" &gt; &lt;el-table-column ...
修改elementui table的行高设置el-table-column的默认行高和内边距
南北极之间
01-19 1万+
关键代码： 在table里面设置： :row-style="{height: '0'}" :cell-style="{padding: '0'}" 参考： https://blog.youkuaiyun.com/qq_38950919/article/details/81056447
elementUI——解决给table修改行高
m0_72590010的博客
05-10 5313
虽然是给每行修改高度，但实际是给单元格修改样式，难怪 row-style 对实际高度不起作用，原本的样式里面每个单元格都有 padding 值。一、给 el-table 添加 cell-style 属性。
获取element-ui的el-table的单行高度
Heartnottowake的博客
06-12 877
加setTimeout是因为如果换行，他获取不到换行后的单行高度。
【elementplus】解决el-table设置固定高度后，横向滚动条消失的问题
bbt953的博客
07-03 3478
消失的原因：因为我给el-scrollbar__bar设置了position: static，覆盖了它原本的样式position: absolute。解决：把position: static删掉。
element-ui中普通表格取消选中效果
最新发布
08-13
<think>根据用户需求，用户希望在使用Element UI的普通表格组件时，实现取消选中的效果。这通常涉及到清除已选中的行或控制选中状态。 在Element UI的表格中，要实现单选并支持取消选中，可以通过以下步骤实现： 1. 使用`el-table`组件的`highlight-current-row`属性可以开启单选高亮当前行的功能。但是默认情况下，点击已选中的行不会取消选中，需要额外处理。 2. 通过监听行点击事件（`row-click`）或使用`@click`事件，在事件处理函数中判断当前点击的行是否已经被选中，如果是，则清除选中状态；如果不是，则选中该行。 具体实现方法如下： ### 方法1：使用`current-change`事件和`row-click`事件结合 - 在表格上设置`highlight-current-row`属性，这样表格会高亮当前选中的行。 - 绑定`current-change`事件，用于记录当前选中的行（`currentRow`）。 - 绑定`row-click`事件，在点击行时，判断当前点击的行是否与已选中的行相同。如果相同，则清除选中（将`currentRow`设为`null`）；如果不同，则设置当前行（实际上`current-change`事件会自动处理）。 但是，由于`current-change`事件在选中行变化时触发，而直接设置`currentRow`为`null`并不会触发`current-change`事件，因此我们需要在模板中通过`ref`获取表格实例，然后调用其`setCurrentRow`方法来设置当前行。 示例代码： ```html <template> <el-table ref="singleTable" :data="tableData" highlight-current-row @row-click="handleRowClick" style="width: 100%" > <!-- 列定义 --> <el-table-column property="date" label="日期"></el-table-column> <el-table-column property="name" label="姓名"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [/* 表格数据 */], currentRow: null // 当前选中的行 }; }, methods: { handleRowClick(row, column, event) { // 如果点击的是已选中的行，则取消选中 if (row === this.currentRow) { this.$refs.singleTable.setCurrentRow(); this.currentRow = null; } else { // 否则，选中该行（实际上setCurrentRow会触发current-change事件，从而更新currentRow） this.$refs.singleTable.setCurrentRow(row); } } }, watch: { // 也可以监听currentRow的变化 } }; </script> ``` ### 方法2：使用`row-class-name`属性配合样式控制（不推荐） 另一种思路是通过自定义行样式，但这种方法并不能真正取消选中，只是视觉上取消高亮，且无法通过表格的API获取当前选中行。因此不推荐。 ### 方法3：使用多选表格模拟单选并支持取消 使用多选表格（`el-table`的`type="selection"`），但设置单选（通过`select`事件控制每次只能选一行），并在点击已选中的行时取消选中。 示例代码： ```html <template> <el-table ref="multipleTable" :data="tableData" @select="handleSelect" style="width: 100%" > <el-table-column type="selection" width="55"></el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [/* 表格数据 */], selectedRow: null // 当前选中的行 }; }, methods: { handleSelect(selection, row) { // 如果当前行已经被选中（即在selection数组中），则再次点击会取消选中，此时selection数组为空或为其他行 // 但我们需要模拟单选，所以先清除所有选中 this.$refs.multipleTable.clearSelection(); // 如果当前点击的行不是之前选中的行（即新选中的行），则选中它 if (row !== this.selectedRow) { this.$refs.multipleTable.toggleRowSelection(row, true); this.selectedRow = row; } else { // 否则，说明是取消选中，将selectedRow置为null this.selectedRow = null; } } } }; </script> ``` 但是这种方法在取消选中时，由于先执行了`clearSelection`，然后并没有选中任何行，所以可以达到取消选中的效果。但是注意，这种方法每次只能选中一行。 ### 总结 根据用户的需求，推荐使用方法1（使用`highlight-current-row`）来实现单选且可取消选中的效果，因为它更符合单选的语义，且Element UI原生支持。 相关问题： 1. 在Element UI表格中，如何实现多选并支持取消单个选中？ 2. Element UI表格中，如何获取当前选中的行数据？ 3. 如何禁用Element UI表格中的某些行的选中功能？ [^1]: Element-ui中Radio组件取消选中 [^2]: vue+element-ui实现表格编辑 [^3]: element-ui表格实现选中删除功能 [^4]: element-ui实现表格单选的功能</think>### Element UI 普通表格实现取消选中效果 在 Element UI 的普通表格中实现取消选中效果，可以通过以下两种常用方法实现： --- #### 方法 1：通过 `current-row-key` 和 `row-click` 实现（推荐） ```html <template> <el-table :data="tableData" highlight-current-row :current-row-key="currentRowKey" @row-click="handleRowClick" > <!-- 列定义 --> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '张三', age: 25 }, { id: 2, name: '李四', age: 30 } ], currentRowKey: null // 存储当前选中行的唯一标识 }; }, methods: { handleRowClick(row) { // 点击已选中的行时取消选中 if (this.currentRowKey === row.id) { this.currentRowKey = null; } // 点击未选中的行时选中 else { this.currentRowKey = row.id; } } } }; </script> ``` **实现原理**： 1. 使用 `highlight-current-row` 开启行高亮 2. 通过 `current-row-key` 绑定当前选中行的唯一标识（如 id） 3. 在 `@row-click` 事件中切换选中状态： - 点击已选中的行时，将 `currentRowKey` 设为 `null` 取消选中 - 点击未选中的行时，将 `currentRowKey` 设为该行 id --- #### 方法 2：通过 `ref` 操作表格实例 ```html <template> <el-table ref="myTable" :data="tableData" highlight-current-row @row-click="handleRowClick" > <!-- 列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [/* 数据 */], currentRow: null // 存储当前选中行 }; }, methods: { handleRowClick(row) { // 点击已选中的行时取消选中 if (this.currentRow === row) { this.$refs.myTable.setCurrentRow(); // 清空选中 this.currentRow = null; } // 点击未选中的行时选中 else { this.currentRow = row; } } } }; </script> ``` **关键 API**： - `this.$refs.tableRef.setCurrentRow()`：清空当前选中行 - `this.$refs.tableRef.setCurrentRow(row)`：设置特定行为选中状态 --- #### 补充说明 1. **取消选中时的视觉反馈**： ```css /* 隐藏默认选中样式 */ .el-table__body tr.current-row > td { background-color: transparent !important; } ``` 2. **多场景应用**： - 结合操作按钮取消选中： ```javascript clearSelection() { this.$refs.myTable.setCurrentRow(); this.currentRow = null; } ``` 3. **完整流程**： ```mermaid graph TD A[点击表格行] --> B{是否已选中?} B -- 是 --> C[取消选中] B -- 否 --> D[设置选中] C --> E[更新currentRowKey为null] D --> F[更新currentRowKey为行ID] ``` --- ### 相关问题 1. 如何在 Element UI 表格中实现双击行取消选中效果？ 2. Element UI 表格的多选模式下如何实现单个选项取消选中？ 3. 如何保存和恢复 Element UI 表格的选中状态？ 4. 在 Vue3 + Element Plus 中如何实现相同的取消选中效果？ 5. 如何为取消选中的行添加自定义动画效果？ [^1]: Element-ui中Radio组件取消选中 [^2]: vue+element-ui实现表格编辑 [^3]: element-ui表格实现选中删除功能 [^4]: element-ui实现表格单选的功能
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值