赞
踩
<el-table-column align="center" prop="startDate" width="120" label="开始日期"> </el-table-column> <el-table-column align="center" prop="endDate" width="120" label="结束日期"> </el-table-column> <el-table-column align="center" fixed="right" label="操作" width="150"> <template slot-scope="scope"> <el-button size="small" type="success" @click="handleUpdate(scope.row)">编辑 </el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除 </el-button> </template> </el-table-column>
根据需求想要隐藏开始日期和结束日期这两列,推荐使用v-if=“条件”.那么我们修改一下代码
<el-table-column align="center" prop="startDate" width="120" v-if="false" (这里写你的条件判断) label="开始日期"> </el-table-column> <el-table-column align="center" prop="endDate" width="120" v-if="false" (这里写你的条件判断,也可以写一个变量,通过其他条件改变这个变量的true或者false) label="结束日期"> </el-table-column> <el-table-column align="center" fixed="right" label="操作" width="150"> <template slot-scope="scope"> <el-button size="small" type="success" @click="handleUpdate(scope.row)">编辑 </el-button> <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除 </el-button> </template> </el-table-column>
这样我们就隐藏了这两个列,但是达不到我想要的效果,页面的真实显示是这两列的占据的宽度还在那里,中间空了两列,然后才是我们的操作,编辑,删除这些按钮.问题出现在哪里呢?我找了好久,这也是我今天加班的原因.问题就出现在我们后面的那个元素
<el-table-column align="center"
fixed="right"
label="操作"
width="150">
看到这个fixed="right"没有,就是因为这个属性才从中作祟,我们把它去掉,页面效果即可展示我想要的.
最后讲一下fixed这个属性 它是生成绝对定位的元素,相对于浏览器窗口进行定位。我们把它设置成right,那么那两列隐藏了,操作这个列位置还是在页面右侧,所以就出现了列隐藏了,实际中间空出来两列.
好了 这就是我今天的踩坑记录!描述的可能有些不准确,请多多见谅.
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。