vue+elemnt-ui,如何让报告份数为0的情况下不显示，判断语句该如何写

vue+elemnt-ui,如何让报告份数为0的情况下不显示，判断语句该如何写？
页面展示

代码展示

            let json = [{
                    msg: "协商时间已过待编制报告",
                    num: response.compile
                },
                {
                    msg: "协商时间已过待审核报告",
                    num: response.examine
                },
                {
                    msg: "协商时间已过待批准报告",
                    num: response.ratify
                },
                {
                    msg: "协商时间已过待检测任务",
                    num: response.test
                }
            ]
            let message = "";
            
            json.forEach((value, index) => {
                if (value.num) {
                    message += value.msg += value.num += '<br>'
                }
            })
            
            message = message.slice(0, message.length - 4)

            this.$notify({
                        title: "提示",
                        dangerouslyUseHTMLString: true,
                        duration: 3000,
                        type: "warning",

                        message: message
                    })

源于chatGPT仅供参考

在Vue.js中，你可以使用`v-if`指令来根据条件控制元素的显示与隐藏。在这种情况下，你可以设置一个条件判断，当报告份数为0时，不显示该元素。

假设你有一个名为`reportCount`的数据属性表示报告份数量，你可以在模板中使用`v-if`指令来实现条件判断并控制元素的显示与隐藏。以下是示例代码：

```html
<template>
  <div>
    <h1>报告</h1>
    <div v-if="reportCount !== 0">
      <!-- 这里是报告内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reportCount: 0 // 报告份数量
    };
  }
};
</script>

在上述代码中，使用v-if指令来判断reportCount是否不等于0，如果满足条件，则显示包含报告内容的div元素。如果reportCount为0，该div元素将不会被渲染到页面中。

通过这种方式，你可以根据报告份数量的值动态控制元素的显示与隐藏。

```

const message = "";
if (this.content.compiler !== 0) {
message += `协商时间已过待编制报告${this.content.compiler}份<br/>`;
}

字符串拼接就可以了

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue中按需引入elemen-ui组件时报错
• 除此之外, 这篇博客: 通过vue实现elemen-ui中的表格的模糊搜索中的 三.代码实现 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

•    <el-table
            :data="tableData"  -------需要进行渲染的数据数组
            border
            style="width:100%;margin:0 auto;margin-top:20px;">
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
  

  vuejs部分

   data () {
      return {
        msg: '',
        search:'',
        datas:[         ---------对渲染数据的数组数据做出限制的data中的数据数组
          {
            date: '2016-05-02',
            name: '王辉',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '李云',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '赵虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '钱小龙',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ]
      }
    },
  

  计算属性部分(通过对data中的数据进行对渲染数据进行限制)
  ——用于计算在template模板中的变量，该变量一般为插值表达式中的变量
  ——通过在computed中对该变量进行操作和计算，一般而言，操作的数据在data中，通过data中的数据来限制插值表达式中的变量
  ——优点：
  ——与watch功能差不多，可实现监控变量
  ——防止差值表达式中的复杂的逻辑堆叠
  ——且其计算属性拥有缓存功能，即只要data中的相关联的数据不发生改变，其computed中的计算的变量或者属性就不会再次调用或者刷新

    computed:{
      tableData(){
        const search=this.search;
        if(search){
            // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            // 注意： filter() 不会对空数组进行检测。
            // 注意： filter() 不会改变原始数组。
         return this.datas.filter(data => {
              // some() 方法用于检测数组中的元素是否满足指定条件;
              // some() 方法会依次执行数组的每个元素：
              // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
              // 如果没有满足条件的元素，则返回false。
              // 注意： some() 不会对空数组进行检测。
              // 注意： some() 不会改变原始数组。
              return Object.keys(data).some(key => {
                //Object.keys()---如果处理对象，将返回一个可进行枚举的属性数组，注意，是返回一个数组，是通过属性名组成的数组
                //Object.keys()---参数：要返回其枚举自身属性的对象；  返回值：一个表示给定对象的所有可枚举属性的字符串数组
                // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
                // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
                return String(data[key]).toLowerCase().indexOf(search) > -1
              })
            })
        }
          return this.datas
        }
    }
  

没啥难度, 你需要在接口返回的数据里面进行判断 , 如有帮助给个采纳谢谢