动态设置表格列表（Maximum recursive updates exceeded. 问题解决）

1、📋 需求描述

💡 需求描述：动态控制表格某列的展示与不展示

2、💥 难点

💡 任务难点...

1. 拿不到当前行的数据（row）,只能使用树节点来进行控制
2. 父节点和子节点用于控制显示隐藏的字段不一样（父节点要通过id控制，子节点需通过sourceGroup控制）
3. 使用watch监听数据导致超出最大递归的警告（Maximum recursive updates exceeded）且效率不高

3、👣 处理方式

💡 如何处理...

1. 第一步定义一个获取columns通过传参（false or true）来控制某列展示与不展示的函数
2. 第二步使用computed计算属性通过当前节点的id 或者 sourceGroup来调用函数并传递相应参数
3. 第三步拿到计算属性得到的dynamicColumns来进行渲染

4、⛳ 代码

💡 相关代码...

<b-table :columns="dynamicColumns" :data="list" :loading="loading" border size="small">
  <template #storageName="{ row }">
    <b-tag :type="row.dsHasTable ? 'success' : 'danger'" dot>
    <b-button type="text" title="详情" @click="handleDetail(row)">
    {{ row.storageName }}
  </b-button>
  </b-tag>
  </template>
  <template #sourceType="{ row }">
    {{ row.sourceType ? NEWMETHOD[row.sourceType] : '' }}
  </template>
  <template #ext="{ row }">
    <action-button
    type="text"
    icon="setting"
    tooltip="扩展配置"
    :disabled="!vConfig || [C_CS, C_QZ].includes(row.sourceGroup)"
    @click="handleExt(row)"
    />
  </template>
  <!-- 表格操作列 -->
  <template #action="{ row }">
    // 省略部分代码...
  </template>
</b-table>

  const getDefaultColumns = (hasExt = true) => [
      {
        title: '名称',
        slot: 'storageName',
        tooltip: true,
        minWidth: 180,
        align: 'left',
      },
      {
        title: '标题',
        key: 'storageDesc',
        tooltip: true,
        minWidth: 180,
        align: 'left',
      },
      {
        title: '数据来源',
        slot: 'sourceType',
        tooltip: true,
        minWidth: 120,
        align: 'center',
      },
      {
        title: '数据分类',
        minWidth: 120,
        align: 'center',
        tooltip: true,
        render: ({ row }) => h('span', initStatus.bussMetaTypeMap.value[row.dataType]),
      },
      {
        title: '状态',
        width: 120,
        align: 'center',
        render: ({ row }) =>
          h(
            BTag,
            {
              tagStyle: { fontSize: '12px' },
              type: row.status === 'audited' ? 'success' : 'info',
            },
            () => initStatus.storageStatusMap.value[row.status],
          ),
      },
      ...(hasExt ? [
        {
          title: '扩展配置',
          slot: 'ext',
          tooltip: true,
          width: 120,
          align: 'center',
        },
      ] : []),
      {
        title: '操作',
        slot: 'action',
        width: 130,
        align: 'center',
        fixed: 'right',
      },
    ];
  	// currentNode为选中的树节点
    const dynamicColumns = computed(
      () => [C_CS, C_QZ].includes(currentNode.value?.id) || [C_CS, C_QZ].includes(currentNode.value?.sourceGroup)
      ? getDefaultColumns(false) : getDefaultColumns()
    )

5、📷 实现效果

💡 效果截图...

前置库和贴源库不显示扩展配置

其他库展示扩展配置

🌏 参考博文

💡 文章链接：无