分享

element 表格 列 隐藏/显示,列顺序错乱

 路人甲Java 2020-03-07

背景

一个 el-table 表格,需要在不同大小的屏幕上显示不同的列数,然后用户可以切换是否显示全部列数。

不靠谱的解决方案

  1. 列上添加 v-show,不知道为啥,反正不好使。
  2. 列上添加 v-if 并为每列添加 :key="Math.random()",CSDN 一位作者 使用这个方法解决了这个问题,但是经我尝试之后并不好使。

靠谱的解决方案

列上添加 v-if 并为每列绑定一个固定的 key。这个 key 可以是手动写的,也可以是列的 index。
示例参考:CSDN 另一位作者

<el-table :data="tableData" border stripe>
  <el-table-column key="1" type="index" label="序号"></el-table-column>
  <el-table-column key="2" prop="orgName" label="单位"></el-table-column>
  <el-table-column key="3" prop="personName" label="姓名"></el-table-column>
  <el-table-column key="4" v-if="staticsTmp" prop="ruleAttendanceDuration" label="外勤(小时)"></el-table-column>
  <el-table-column key="5" v-if="staticsTmp" prop="innerDutyDuration" label="内勤(小时)"></el-table-column>
  <el-table-column key="6" v-if="staticsTmp" prop="leaveCount" label="请假(小时)"></el-table-column>
  <el-table-column key="7" v-if="staticsTmp" prop="changeCount" label="调休(小时)"></el-table-column>
  <el-table-column key="8" v-if="staticsTmp" prop="lendCount" label="借出(小时)"></el-table-column>
</el-table>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约