el-table的表头宽度

最新推荐文章于 2024-07-12 02:57:57 发布

我爱大肘子

最新推荐文章于 2024-07-12 02:57:57 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44388086/article/details/113519906

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天在用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>

主要是这里用到的ref记得写上

<div style="width: 96%;margin: auto;" ref="alltable">

然后

mounted() {
//这里是按照百分比计算想要的表格宽度，如果说是报undefined的话记得看看上面的ref 不能有if判断
	this.coum1=this.$refs.alltable.clientWidth*0.8
	this.coum2=this.$refs.alltable.clientWidth*0.2
},