热门标签
热门文章
- 1分组UITableVie
- 2tomcat+myeclipse+mysql环境搭建_搭建myeclipse+tomcat+mysql网站开发环境
- 3TCP/IP协议以及UDP(超详细,看这一篇就够了)_tcp/ip udp
- 4python import re_彻底搞懂Python 中的 import 与 from import
- 5分布式文件存储FastDFS_分布式文件存储选型 fastdfs
- 6RecylerView布局管理器LayoutManager(详解)_recyclerview layoutmanager
- 7重要开源协议的比较(BSD,Apache,GPL,LGPL,MIT) – 整理_bsd3
- 8python class类里给列表排序_Python sorted对list和dict排序
- 9python 数据库框架peewee_Python框架--Peewee使用
- 1023年最新版pycharm找不到conda可执行文件解决办法
当前位置: article > 正文
el-table的表头宽度_el-table表头宽度均分
作者:Gausst松鼠会 | 2024-02-20 02:12:45
赞
踩
el-table表头宽度均分
今天在用elementui中的表格el-table的时候发现这个组件的表格不能用百分比来做,(也不是说不能用百分比,在网上有看到说是用min-width来做,但是我用这个方法不生效就只能另找其它方法)
<div style="width: 96%;margin: auto;" ref="alltable"> <div class="content" v-for="(item,index) in week1and4" :key="index" style="margin-top: 20px;" :class="isfsy==false?'':' blur'" > <div class="header_text"> <div style="font-size: 19px;font-weight: bold;">学习目标:</div> <div class="mub" v-html="item.topic" style="line-height: 23px;"></div> <div class="mub" style="color: red;font-size: 12px;"> <span>一键获取学习任务获取方式</span> <img src="../../static/image/email_icon.png" alt="" style="width: 18px;height: 13px;vertical-align: middle;margin-left: 5px;"> </div> <div class="mub" style="color: red;font-size: 12px;">点击下方"?"查看学习任务说明</div> </div> <div class="study_table"> <!-- table表格 --> <el-table :data="item.weekList" ref="multipleTable" style="width: 100%" height="auto" @select="liu" @selection-change="handleSelectionChange" > <!-- 学习任务 --> <el-table-column prop="address" label="学习任务" :width="coum1"> <template slot-scope="scope"> <div> <img src="../../static/image/wen_icon.png" alt="" style="width: 7%;vertical-align: middle;" @click="dagio(scope.row.remark)"> <span class="task_text" v-html="scope.row.topic"></span> </div> </template> </el-table-column> <!-- 自评人 --> <el-table-column label="自评人" type="selection" :width="coum2" v-if="nowremark=='待审批' " :selectable="selectab"></el-table-column> <el-table-column label="自评人" type="selection" :width="coum2" v-if="nowremark=='已完成' " :selectable="selectab"></el-table-column> <el-table-column label="自评人" type="selection" :width="coum2" v-if="nowremark=='待完成'||nowremark=='进行中' " ></el-table-column> </el-table> </div> </div> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
主要是这里用到的ref记得写上
<div style="width: 96%;margin: auto;" ref="alltable">
- 1
然后
mounted() {
//这里是按照百分比计算想要的表格宽度,如果说是报undefined的话记得看看上面的ref 不能有if判断
this.coum1=this.$refs.alltable.clientWidth*0.8
this.coum2=this.$refs.alltable.clientWidth*0.2
},
- 1
- 2
- 3
- 4
- 5
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/117904
推荐阅读
相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。