在vue中写一个点击查询按钮，根据输入框中输入的内容来查询表格数据，模糊查询设置名称，输入框没有值时显示列表所有值

在Vue中实现点击查询按钮，根据输入框中输入的内容来查询表格数据，模糊查询设置名称，输入框没有值时显示列表所有值，可以按照以下步骤进行：

1. 在模板中定义一个输入框和一个查询按钮，绑定相应的事件：

<template>
  <div>
    <input type="text" v-model="query" placeholder="请输入查询关键字">
    <button @click="search">查询</button>
    <table>
      <!-- 表格内容 -->
    </table>
  </div>
</template>

2. 在data中定义一个变量query，用来存储输入框中的值，并定义一个变量data，用来存储表格数据：

<script>
export default {
  data() {
    return {
      query: '',
      data: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 25 }
      ]
    }
  },
  methods: {
    search() {
      // 查询逻辑
    }
  }
}
</script>

3. 在search方法中实现查询逻辑，根据输入框中的值来过滤表格数据，如果输入框没有值，则显示所有数据：

search() {
  if (this.query) {
    // 如果输入框有值，则按名称模糊查询
    this.data = this.data.filter(item => item.name.includes(this.query))
  } else {
    // 如果输入框没有值，则显示所有数据
    this.data = [
      { name: '张三', age: 20 },
      { name: '李四', age: 22 },
      { name: '王五', age: 25 }
    ]
  }
}

4. 在表格中使用v-for指令循环渲染数据：

<table>
  <tr v-for="item in data" :key="item.name">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

完整代码如下：

<template>
  <div>
    <input type="text" v-model="query" placeholder="请输入查询关键字">
    <button @click="search">查询</button>
    <table>
      <tr v-for="item in data" :key="item.name">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      data: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 },
        { name: '王五', age: 25 }
      ]
    }
  },
  methods: {
    search() {
      if (this.query) {
        // 如果输入框有值，则按名称模糊查询
        this.data = this.data.filter(item => item.name.includes(this.query))
      } else {
        // 如果输入框没有值，则显示所有数据
        this.data = [
          { name: '张三', age: 20 },
          { name: '李四', age: 22 },
          { name: '王五', age: 25 }
        ]
      }
    }
  }
}
</script>