用element-plus框架插入一个增删改查分页功能的模板生成vue3生成vue3格式 script setup代码要求所有方法或箭头函数都用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可

<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <!-- 搜索条件 -->
      <el-form-item label="名称">
        <el-input v-model="searchForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <!-- 表头 -->
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="名称" width="120"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column prop="address" label="地址" width="200"></el-table-column>
      <el-table-column prop="operation" label="操作" width="120">
        <template #default="{row}">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination, message } from 'element-plus';
import { fetchData, addData, editData, deleteData } from '@/api/demo';

const searchForm = ref({
  name: '',
});
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

function handleSearch() {
  fetchData({
    name: searchForm.value.name,
    page: currentPage.value,
    pageSize: pageSize.value,
  }).then(res => {
    tableData.value = res.list;
    total.value = res.total;
  });
}

function handleAdd() {
  // 弹出添加对话框，填写表单数据
  // ...
  addData(formData).then(res => {
    message.success('添加成功');
    handleSearch();
  });
}

function handleEdit(row) {
  // 弹出编辑对话框，填写表单数据
  // ...
  editData(formData).then(res => {
    message.success('编辑成功');
    handleSearch();
  });
}

function handleDelete(row) {
  // 弹出删除确认框
  // ...
  deleteData(row.id).then(res => {
    message.success('删除成功');
    handleSearch();
  });
}

function handleCurrentChange(val) {
  currentPage.value = val;
  handleSearch();
}
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}
</style>