vue3中使用antd实现检索框嵌套一个table

在Vue3中使用Antd实现检索框嵌套一个Table的步骤如下：

1. 安装Antd和Axios

npm install ant-design-vue axios

2. 在main.js中引入Antd和Axios

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import axios from 'axios';
import App from './App.vue'

const app = createApp(App)
app.config.productionTip = false
app.use(Antd)
app.config.globalProperties.$axios = axios
app.mount('#app')

3. 在组件中引入Table和Input组件

<template>
  <div>
    <a-input-search v-model="search" placeholder="请输入关键字" @search="getTableData" />
    <a-table :columns="columns" :dataSource="tableData" :loading="loading" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { Table, Input } from 'ant-design-vue'

export default defineComponent({
  components: {
    'a-table': Table,
    'a-input-search': Input.Search
  },
  data() {
    return {
      search: '',
      tableData: [],
      loading: false,
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address'
        }
      ]
    }
  },
  methods: {
    getTableData() {
      this.loading = true
      this.$axios.get('/api/data', {
        params: {
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(err => {
        console.error(err)
        this.loading = false
      })
    }
  }
})
</script>

在这个例子中，我们使用了Input.Search来实现一个搜索框，当用户输入关键字并按下Enter键时，会触发search事件，调用getTableData方法来请求数据。在getTableData方法中，我们通过Axios发送请求，将搜索关键字作为参数传递给后端，在后端进行数据查询，返回查询结果。最后，我们将查询结果显示在Table组件中。