vue3中，el-table表格中基础的查询、重置、新增、编辑回显、删除

在Vue 3中，可以使用Element Plus（Vue 3的Element UI官方版本）来实现一个基本的el-table表格，包括查询、重置、新增、编辑回显和删除的功能。以下是一个简化的示例代码：

<template>
  <div>
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 200px; margin-left: 10px"></el-input>
    <el-button @click="searchQuery = ''; loadData()">重置</el-button>
    <el-table :data="filteredData">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="operation" label="Operation">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const data = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  // ...更多数据
]);
 
const searchQuery = ref('');
 
const filteredData = computed(() => {
  return data.value.filter(item => item.name.includes(searchQuery.value));
});
 
const loadData = () => {
  // 模拟从服务器加载数据
  // fetchData().then(response => { data.value = response; });
};
 
const handleAdd = () => {
  // 新增逻辑
};
 
const handleEdit = (row) => {
  // 编辑逻辑
};
 
const handleDelete = (row) => {
  ElMessageBox.confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 删除逻辑
    // deleteData(row.id).then(() => {
    //   data.value = data.value.filter(item => item.id !== row.id);
    // });
  }).catch(() => {
    // 取消删除
  });
};
 
loadData();
</script>

在这个示例中，我们使用了Vue 3的<script setup>语法糖，以及Element Plus组件库。data是表格数据的响应式引用，searchQuery用于搜索查询，filteredData是根据搜索内容过滤后的计算属性。handleAdd处理新增操作，handleEdit处理编辑操作，handleDelete处理删除操作，它会弹出确认框让用户确认是否删除。实际应用中，你需要替换数据获取、新增、编辑和删除的逻辑以连接你的后端API。