当前位置:   article > 正文

el-table的表头宽度_el-table表头宽度均分

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
推荐阅读
相关标签