vue3 vben admin table 动态列实现

在开发报表功能模块时，会根据用户的查询条件，来展示不同的列 最开始我的实现方案是 封装一个单独的组件，通过props传入的参数进行判断 也就是这样子

定义dataGrid.vue组件

const props = defineProps < { params: any } > ();

const [registerTable, { reload }] = useTable({
  columns: [{
    title: '单元',
    dataIndex: 'unit',
    width: 50,
    ifShow() {
      return _.get(props, 'params.level', 0) >= 2;
    },
  },{
        title: '房屋昵称',
        dataIndex: 'buildingNo',
        width: 150,
        ifShow() {
         return _.get(props, 'params.level', 0) >= 4;
        },
  },]
})

在容器组件引入 dataGrid.vue 并命名为 Receivable

<template>
    <!--调用组件-->
    <Receivable @export="handleExport" :params="formData" :key="gridKey" />
</template>

<script setup lang="ts">
    import Receivable from './dataGrid.vue';
    
    let formData = ref();
    let gridKey = ref(buildUUID());
</script>

这就导致，我都要需要用key去强制刷新子组件，影响性能，而且调用不方便，于是针对这个问题我想了想，如何优雅的实现。 我先明确，手段和目标，目标就是优雅简单的调用，手段，原来的手段不满足优雅简单而且性能还不好

我梳理了一下流程，需要根据查询条件的变化对列里面的数组做增减，那能实现这个无法就2个函数watch和 computed函数，那这两个的手段我该用哪个？假设我用watch 函数，监听props，那还是无法解决调用麻烦的问题，还要在watch 函数写一堆很变扭。 那接着我就考虑computed函数，那computed函数它是需要监听响应式变量，于是我跟进一步的，想到，那既然这样，我也定义几个变量，然后在表单onChange事件去赋值就可以了，最后这么一想，我就直接开干，实践是检验真理的唯一标准。最后的效果非常丝滑流畅清晰，好维护

容器组件调用

<template>
  <div>
    <PageHeaderHXRJ class="ml-4 mr-4 mt-4">实收报表</PageHeaderHXRJ>
    <DataGrid />
  </div>
</template>

<script setup lang="ts" name="实收报表">
  import DataGrid from './dataGrid.vue';
  import PageHeaderHXRJ from '/@/views/components/PageHeaderHXRJ.vue';
</script>

<style scoped></style>

数据组件定义

  <BasicTable :columns="tableColumns" @register="registerTable">
  </BasicTable>
  
  <script setup lang="ts">
  
  import { computed } from 'vue';
  
  let level = ref<number>(0);
  let details = ref<boolean>(true);
  
  // 计算属性方便实时变更
  let tableColumns = computed<BasicColumn[]>(() => {
      return [{
           title: '项目名称',
        dataIndex: 'projectName',
        width: 150,
      },{
        title: '单元',
        dataIndex: 'unit',
        width: 100,
        ifShow() {
          return level.value >= 2;
        },
      },]
  })
  // 搜索条件赋值
    const [registerTable, { getForm }] = useTable({
     formConfig: {
     schemas: [{
          label: '查询范围',
          component: 'Select',
          field: 'level',
          colProps: { span: 4 },
          required: true,
          componentProps: {
            options: [
              { label: '楼栋', value: 1 },
              { label: '单元', value: 2 },
              { label: '楼层', value: 3 },
              { label: '房屋', value: 4 },
            ],
            onChange(e) {
            //赋值，触发computed
              level.value = e;
            },
          },
        }]
     }
    })
  
  </script>