未查询到记录时删除动态表的if语句实现咨询

现存代码问题梳理 #

• 变量拼写不一致：代码中出现displyedData（拼写错误）和DisplayedColumns（首字母大写），首先要确认组件内变量的拼写完全统一，避免访问不存在的变量导致逻辑失效。
• 条件判断逻辑错误：你调用了push方法往displayedData里塞值，说明初始化时这个变量已经被赋值为空数组[]，空数组和null是完全不同的值，this.displayedData == null的判断永远不会成立。
• delete操作使用不当：delete是用来删除对象属性的操作符，如果DisplayedColumns是数组类型，用delete只会清空对应索引的内容，不会销毁数组；如果是模板绑定的变量，直接删除还会导致模板读取变量时报错。

可行实现方案 #

核心逻辑调整 #

不需要删除列配置变量，更稳妥的方案是通过数据长度直接控制表格的渲染状态，逻辑层代码调整如下：

// 先清空上一次查询的旧数据，避免残留
this.displayedData = []
this.exclusions.forEach(ex => this.displayedData.push(exclusionRowData(ex)))
// 如有需要可以在这里同步处理列的显隐，不需要用delete
// this.displayedColumns = this.displayedData.length ? 你的原始列配置 : []

模板层联动控制 #

直接在模板中加渲染判断，数据为空时直接不渲染表格，还可以同步展示空状态提示：

以下为不同框架的示例写法，可根据你的技术栈对应调整

• Vue示例

<template>
  <!-- 有数据才渲染表格 -->
  <el-table v-if="displayedData.length" :data="displayedData" :columns="displayedColumns"></el-table>
  <!-- 无数据展示空提示 -->
  <div v-else>未查询到匹配记录</div>
</template>

• Angular示例

<table *ngIf="displayedData.length" mat-table [dataSource]="displayedData">
  <!-- 列定义省略 -->
</table>
<div *ngIf="!displayedData.length">未查询到匹配记录</div>

• React示例

function YourComponent() {
  return (
    <>
      {displayedData.length ? (
        <Table dataSource={displayedData} columns={displayedColumns} />
      ) : (
        <div>未查询到匹配记录</div>
      )}
    </>
  )
}

内容的提问来源于stack exchange，提问作者Jamar Johnson - QD2-C