Vue动态表格列显隐实战：打造灵活可配置的数据展示界面

在Vue企业级项目中，表格是数据展示的核心组件之一。当面对复杂业务需求时，我们经常需要实现表格列的动态隐藏与显示 功能，这不仅能够提升用户体验，还能根据不同场景灵活配置数据展示。本文将深入探讨如何基于this.adviceColumn[jclIndex].hidden = true配合:tableColumns="adviceColumn.filter(col => !col.hidden)"实现这一功能。

一、核心实现原理

动态隐藏表格列的核心思想是：通过控制列配置对象的属性，配合计算属性实时过滤隐藏列。让我们看一个精简版实现：

javascript 复制代码

// 列配置数组
adviceColumn: [
  { label: '药品代码', prop: 'YPDM', hidden: false },
  { label: '药品名称', prop: 'SPMC', hidden: false },
  { label: '加成率(%)', prop: 'JCL', hidden: false },
  // ...其他列
],

// 表格组件使用过滤后的列
<MultiDataTable 
  :tableColumns="visibleColumns"
  // ...其他属性
>
// 插槽计算值
<template #JCL="{row}">
              <span>
                {{
                  row.XBZJHJ && Number(row.XBZJHJ) !== 0
                    ? (((Number(row.XBZLSJ) - Number(row.XBZJHJ)) / Number(row.XBZJHJ)) * 100).toFixed(2)
                    : ''
                }}
              </span>
            </template>

</MultiDataTable>

// 计算属性
computed: {
  visibleColumns() {
    return this.adviceColumn.filter(col => !col.hidden);
  }
}

或者直接：
// 表格组件使用过滤后的列
<MultiDataTable
:tableColumns="adviceColumn.filter(col => !col.hidden)"
// ...其他属性
/>

二、实战代码解析

1. 条件隐藏列的实现

在项目代码中，我们根据业务条件动态设置列的隐藏状态：

javascript 复制代码

async openwithparm_w_md_yptj_yptjxz(lstr_mess) {
  // ...前置代码
  
  // 获取权限配置
  let ls_bzw = '';
  await handlerRequest(3911, {
    gs_bjbmbh: this.$store.state.user.deptCode,
  }).then(res => {
    if (res.code == 200 && res.data) {
      ls_bzw = res.data[0].BZW;
    }
  });
  
  // 根据权限配置隐藏加成率列
  if (ls_bzw[4] === '1' || ls_bzw[6] === '1' || 
      ls_bzw[8] === '1' || ls_bzw[9] === '1' || 
      ls_bzw[10] === '1') {
    const jclIndex = this.adviceColumn.findIndex(col => col.prop === 'JCL');
    if (jclIndex !== -1) {
      this.$set(this.adviceColumn[jclIndex], 'hidden', true);
    }
  }
  
  // ...后续代码
}

或者通过方法的形式隐藏：

复制代码

// 是否展示报损原因列
toggleBSYYColumn(show) {
  this.showBSYY = show;
  // 根据状态动态生成表格列配置
  this.adviceColumn = this.adviceColumn.filter(column => {
    if (column.prop === 'BSYY') {
      // 仅在showBSYY为true时添加BSYY列
      return this.showBSYY;
    }
    // 其他列始终保留
    return true;
  });
},