Element(5) 动态显示隐藏筛选表格列数据

不念不忘少年蓝@ 2023-07-24 08:36 73阅读 0赞

### 一、前言 ###

本文将实现`element`的动态显示隐藏筛选表格列数据，功能很简单，这里简单的记录一下，效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]

### 二、功能实现 ###

主要使用element的 `多选框组checkbox-group` \+ `popover弹出框` 来实现

1.  checkbox-group: [https://element.eleme.cn/2.10/\#/zh-CN/component/checkbox][https_element.eleme.cn_2.10_zh-CN_component_checkbox]
2.  popover弹出框: [https://element.eleme.cn/2.10/\#/zh-CN/component/popover][https_element.eleme.cn_2.10_zh-CN_component_popover]

### 三、代码部分 ###

> 温馨小提示：个人实现代码仅供参考，建议多看下element官网提供的资料来实现~

#### 1、列筛选弹出框 ####

<el-popover placement="right" title="列筛选" trigger="click" >
      <el-checkbox-group v-model="factorNames" @change="handleColumnFilter">
        <el-checkbox v-for="item in factorNameColumnList" :key="item" :label="item">{
       { item.factorName }}</el-checkbox>
      </el-checkbox-group>
      <el-button slot="reference"><i class="el-icon-arrow-down el-icon-menu" />监测因子</el-button>
    </el-popover>

#### 2、表格数据 ####

<el-table :data="list" border>
      
      <el-table-column label="xx" prop="xx" align="center" />
      
      <template v-for="(col,i) in factorNames">
        <el-table-column :label="col.factorName" align="center">
          <template slot-scope="scope">
            {
       { scope.row.factorList[i].monitorValue }}
          </template>
        </el-table-column>
      </template>
    </el-table>

#### 3、JS ####

export default { 
      name: 'App',
      data() { 
        return { 
          list: [],
          factorNames: [], // 用于显示的列
          factorNameColumnList: [], // 监测因子所有列-用于可选择的列
          listLoading: true
        }
      },
      created() { 
        this.getList() // 获取表格数据
        this.getFactorTypeList() // 动态获取表格列
      },
      methods: { 
        getList() { 
          this.listLoading = true
          getDataList({ }).then(response => { 
            this.list = response.data.records
            this.listLoading = false
          })
        },
        getFactorTypeList() { 
          getFactorList({  'type': 2 }).then(response => { 
            this.factorNames = response.data.map(item => { 
              return {  factorId: item.factorId, factorName: item.name }
            })
            this.factorNameColumnList = this.factorNames
          })
        },
        // 列过滤
        handleColumnFilter(val) { 
          this.factorNames = val
        }
      }
    }
    </script>

### 4、部分代码解释 ###

1.  `el-checkbox-group` 绑定的`factorNames`值为所显示的动态的列
2.  `el-checkbox` 循环的`factorNameColumnList`数据为所要筛选的列

#### 5、后端响应的表格列数据格式 ####

动态列字段：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]

表格列数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20230528/6a7738cbf8c246e28626c8f4b8a0ea40.png
[https_element.eleme.cn_2.10_zh-CN_component_checkbox]: https://element.eleme.cn/2.10/#/zh-CN/component/checkbox
[https_element.eleme.cn_2.10_zh-CN_component_popover]: https://element.eleme.cn/2.10/#/zh-CN/component/popover
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 1]: /images/20230528/43fea6f84252464d924be12a5e087228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70 2]: /images/20230528/fb1b79ab84bf40ff875789dd6c5a0982.png