vue+elementUI-el-table+less实现表格列的隐藏与显示更新版

目录

实现思路

主要代码

1.子组件代码（trendsTable.vue）

2.父组件-引用此组件主要代码

总结

---

---

实现思路

基于vue+elementUI-el-table+less实现表格列的隐藏与显示-之前版本是所有的列都可以进行隐藏或者显示，依据的判断条件是数组下标。此次更新版本是部分可以隐藏与显示，判断依据是此列的prop属性。

将表格展示+分页+显示/隐藏列  组件化，其中利用slot动态展示不同的表格数据，父组件引用此组件传递相应切必须的参数，当分页或显示/隐藏列动态变化时将数据再返回父组件，父组件中的列根据回传的数据利用v-if实现列的显示与隐藏  

在想要隐藏的列上加上class-name="column_visible" 并结合v-if=columnHideList[prop] 实现

---

主要代码

1.子组件代码（trendsTable.vue）

代码如下（示例）：

<!-- create by crystalSong 分页+table+动态设置表格列的隐藏与显示 -->
<template>
  <div class="trends_container">
    <div class="table_container">
      <el-table
        ref="trendsTable"
        :data="tableList"
        fit
        stripe
        style="width: 100%"
        border
        :highlight-current-row="obj.hcrow"
        @selection-change="handleSelectionChange"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @cell-mouse-enter="handleCellMouseEnter"
        @cell-mouse-leave="handleCellMouseLeave"
      >
        &