vue3 antd table表格的增删改查 input输入框根据关键字搜索【后台管理系统 请求后端接口 前后端交互】

<template>
  <a-table :columns="columns" :dataSource="data" :pagination="false">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.key === 'name'">
        <a-input v-model:value="record.name" @change="handleChange(record.id, 'name', $event.target.value)" />
      </template>
      <template v-else-if="column.key === 'age'">
        <a-input-number v-model:value="record.age" @change="handleChange(record.id, 'age', $event)" />
      </template>
      <template v-else-if="column.key === 'address'">
        <a-input v-model:value="record.address" @change="handleChange(record.id, 'address', $event.target.value)" />
      </template>
      <template v-else>
        {{ text }}
      </template>
    </template>
  </a-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { Table, Input, InputNumber } from 'ant-design-vue';
 
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];
 
const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  // ...other data
]);
 
const handleChange = (id, field, value) => {
  const row = data.value.find(row => row.key === id);
  if (row) {
    row[field] = value;
  }
};
</script>

这段代码使用了Ant Design Vue库中的Table和InputNumber组件，以及Vue 3的Composition API（setup script）来实现表格行的编辑功能。代码中定义了一个handleChange方法，它会在输入框内容变化时被调用，并将变化的数据更新到data数组对应的元素中。这样，表格的数据就可以根据用户的输入进行实时更新。