ElementUI使用el-table标签操作固定位置

已于 2022-06-21 00:07:16 修改
阅读量6.3k 收藏 2
点赞数 1
分类专栏： 前端技术 全栈工程师 文章标签： vue elementUI el-table
于 2019-09-30 15:36:46 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/k_love1219/article/details/101775255
版权

你知道的越多，你不知道的越多；本文仅做记录，方便以后备阅。希望也能帮到正在看这篇文章的你。

具体操作如下

示例代码：

<el-table-column label="操作">
    <template slot-scope="scope">
        <el-row :gutter="12" class="nav">
            <el-col :span="8">
               <el-button size="medium" type="text"  @click="edit(scope.$index, scope.row)">查看</el-button>
            </el-col>
            <el-col :span="6">
               <el-button size="medium" type="text"  @click="Delete(scope.$index, scope.row)">删除</el-button>
            </el-col>
         </el-row>
    </template>
</el-table-column>

增加<el-row>标签固定gutter值，这样可以防止页面变形！

欢迎大家评论转发，收藏！

由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！

Java-云海
关注
专栏目录
ELEMENTUI 之EL-TABLE 的一点小总结[表头内容错位[自定义BORDER问题][自定义列宽度]
qq_44242030的博客
05-25 1354
标签： vue HTML5 JavaScript html css 前端在开发PC 端项目时，现在用的比较多的就是Element UI,而在PC端管理系统中，Table 可以说是必不可少，刚开始使用对table没有做过多的处理，可是在需要做一些处理时，对其文档不熟悉使用不熟练总出现一些意想不到的问题。 表头和内容错位： 解决在全局中添加 样式可解决： .el-table th.gutter { display: table-cell !important; } 自定义table 边框及单元格边框
elementui el-table 多行合计、插入标签
Nancy617的博客
01-07 6717
1.传参 需要获取当前是第几个表格。加ref是为了让表格合计行渲染正常。data是组件自带的参数，index是获取到的外层循环下标。 <el-table :data="item.orderFoodList" show-summary :summary-method="data=>summaries(data,index)" ref="detailTable"> created() { this.getOrderList() }, updated() { // 用于防止表格合计行不显示
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
10-15
主要介绍了解决elementUI 切换tab后 el_table 固定列下方多了一条线问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element框架＜el-table＞＜/el-table＞表格滚动条固定位置
nibabaoo的博客
02-01 2064
classList?el?},})/* table自定义指令样式 */
【element-ui】el-table固定前(后)行
最新发布
weixin_48847755的博客
09-25 931
自定义el-table固定前两行&合计行
ElementUI form表单 左侧label对齐注意事项
weixin_30536513的博客
10-12 4419
通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。 转载于:https://www.cnblogs.com/yiyiyur...
elementui table 右侧操作栏 fixed错位问题
weixin_41955516的博客
05-25 1882
elementui table 右侧操作栏 fixed错位问题 解决办法重新计算table布局 在这里插入代码片/* 监听table数据对象 */ watch: { tableData(val) { this.doLayout(); } } /* 重新渲染table组件 */ doLayout(){ this.$nextTick(() => { that.$refs.table.doLayout() })
element ui中表单el-form的label设置
热门推荐
qq_45725046的博客
04-01 1万+
1.可以通过label-width设置 2.文本域的字符长度可以使用maxlength限制 3.通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。 ...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
首先，ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <el-table :data="tableData" style="width: ...
elementui——el-tabs固定高度&内容超出高度可滚动
weixin_37877794的博客
07-01 1万+
.el-tabs--card { height: calc(100vh - 110px); overflow-y:auto }
vue——el-table固定列 fixed
wy313622821的博客
05-16 4005
我们要实现如下图的效果： 将操作列固定在右侧 在列中 加: fixed="right" <el-table-column label="操作" width="160" fixed="right"> <template slot-scope="scope"> <router-link :to="'/order/save/'+scope.row.id"> <el-button type="
ElementUI：通过按钮控制Tabs标签页的左右切换
weixin_38942919的博客
02-03 6498
实现效果： 给左右按钮绑定add()和sub()事件，控制左切or右切 <template> <div class="xiangyou" @click="add()"></div> <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-t..
【vue】elementUI中el-table拖动滚动条的时候固定某一列
前端代码小白的日常博客
04-25 5131
写项目的时候有一个需求，就是当el-table的滚动条滑动的时候，可见区域如果没有该列则固定到左侧，由elementUi官方网站可知el-table固定一列的代码如下:fixed为主要的标识头部固定设置的是table的高度。
element-plus el-tabs组件label固定，不随着内容溢出滚动
周厚强的博客-13797120587
05-06 2302
vue3 element-plus el-tabs组件label固定，不随着内容溢出滚动。
Vue中el-table追加行后固定列滚动错位问题
qq_39753413的博客
07-12 2981
Vue中el-table追加行后固定列滚动错位问题 偶然发现一个问题，但是并没有找到解决方案，自己调试了两个多小时终于解决。先贴出问题业务描述：在已查询完全部的符合条件的数据后，表格最下方提示“没有更多数据” 使用solt = “append” 追加div 这时候滑动到最底部，固定列错位了。......
菜单在顶部固定，根据页面位置自动定位对应菜单
joe_324的博客
03-08 410
html部分 <div class="product-detail">...</div> <div class="tabs"> <div class="tab-head"> <a class="lists" href="#lists"><h2 id="tab-lists">Lists</h2></a> <a class="ne
ElementUI标签页添加键位置调整（仿浏览器标签页）
qq_45788135的博客
07-10 312
1. 设置标签头为flex可伸缩属性2. 调整标签页（弹性项目在弹性容器中的顺序为1）3. 调整添加键（弹性项目在弹性容器中的顺序为2）结果如下所示。
vue实现el-table-column中自定义label
青莳的博客
01-30 2936
默认的label只能显示普通文字，如果有一些特殊需求，比如换行显示，更改文字颜色，更改文字大小，就需要自定义label了
elementUI el-table 设置高度后 最后一行显示不全
09-24
在 el-table 中设置高度后，如果最后一行显示不全，可能是由于表格的布局问题导致的。您可以尝试在 el-table 标签上添加属性 "element-loading-text" 来解决这个问题。 ```html <el-table :data="tableData" height="200" element-loading-text="正在加载" > <!-- table columns --> </el-table> ``` 另外，您还可以尝试设置表格的 "max-height" 和 "overflow-y" 来解决这个问题。 ```html <el-table :data="tableData" max-height="200" style="overflow-y: auto" > <!-- table columns --> </el-table> ``` 或者设置表格外面的父容器，让父容器超出隐藏 ```html <div style="overflow:auto;height: 200px"> <el-table :data="tableData"> <!-- table columns --> </el-table> </div> ``` 这些方法都可以让表格的高度固定，并且在数据过多时可以通过滚动条来查看数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java-云海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值