前端表格组件中想隐藏某个列的需求
#今天工作遇到了一个这样的需求.根据特定的条件,想要隐藏某些列,这种定制化的需求.话不多说,直接上代码
<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,那么那两列隐藏了,操作这个列位置还是在页面右侧,所以就出现了列隐藏了,实际中间空出来两列.
好了 这就是我今天的踩坑记录!描述的可能有些不准确,请多多见谅.