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