vue的结构已经v-if v-else 的问题？

Question

如下代码:

<div v-if="tabeldata.length == 0">
    暂无数据
</div>
<div v-else>
    <el-table></el-table>
</div>
<div >
    匹配不到数据哦？
</div>

table表格数据是通过查找id，得出的，没调接口

现在是下拉框查找id 去 匹配表格id，如果匹配到就把数据放到table行里面，现在筛选下拉框id匹配不到就展示匹配不到数据哦？再次筛选下拉框id匹配到就返回匹配到的数据》》
请问这个如何实现这个功能

代码是这样的

handlesubmit(this: any) {
    const filteredData = this.tableData.filter(v => v.tempName === this.tempName);
    if (filteredData.length > 0) {
      this.tableData = filteredData;
    } else {
      this.tableData = [...this.originalTableData]; // 如果没有匹配到数据，还原为原始数据
    }
  },
  

Answer 1

tableData.length === 0 时候，显示 "暂无数据"；再用一个变量去存这个状态根据这个状态来去控制显示。

<template>
  <div>
    <div v-if="tableData.length === 0">
      暂无数据
    </div>
    <div v-else-if="noMatch">
      匹配不到数据哦？
    </div>
    <div v-else>
      <el-table :data="tableData"></el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tempName: "",
      tableData: [],
      originalTableData: [],
      noMatch: false,
    };
  },
  methods: {
    handleSubmit() {
      const filteredData = this.originalTableData.filter(
        (v) => v.tempName === this.tempName
      );
      if (filteredData.length > 0) {
        this.tableData = filteredData;
        this.noMatch = false;
      } else {
        this.noMatch = true;
        this.tableData = [...this.originalTableData]; // 如果没有匹配到数据，还原为原始数据
      }
    },
  },
};
</script>

Answer 2

直接在标签上加上v-else-if的判断就行吧
<div v-if="tabeldata.length == 0">

暂无数据

</div>
<div v-else-if="tabeldata.length > 0">

<el-table></el-table>

</div>
<div v-else-if="filteredData.length == 0">

匹配不到数据哦？

</div>