vue3超购项目中element ui二次封装代码

以下是一个简单的例子，演示了如何在Vue3中使用Element UI进行二次封装：

<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="12">
        <el-button @click="handleClick">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>
</template>

<script>
import { ref } from 'vue';
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElRow, ElCol, ElCard } from 'element-plus';

export default {
  components: { ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElRow, ElCol, ElCard },
  setup() {
    const inputValue = ref('');
    const tableData = ref([
      { name: '张三', age: 20, address: '北京市海淀区' },
      { name: '李四', age: 25, address: '上海市浦东新区' },
      { name: '王五', age: 30, address: '广州市天河区' },
    ]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(3);

    const handleClick = () => {
      // 搜索逻辑
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
    };

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    return {
      inputValue,
      tableData,
      currentPage,
      pageSize,
      total,
      handleClick,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

在这个例子中，我们引入了Element UI中的一些组件，如`ElInput`、`ElButton`、`ElTable`等。我们使用`ref`函数来创建响应式数据，并将其绑定到组件的属性或事件中。我们还可以在`setup`函数中定义方法来处理组件的事件，如`handleClick`、`handleSizeChange`、`handleCurrentChange`等。

通过这种方式，我们可以更加灵活地使用Element UI，并根据自己的需求进行二次封装，提高代码的可维护性和重用性。