Vue3学习集成ElementPlus实现增删改查

在Vue3中，你可以使用ElementPlus库来快速实现一个简单的增删改查（CRUD）界面。以下是一个基本的例子：

首先，确保你已经安装了ElementPlus：

npm install element-plus --save

然后，在你的Vue3项目中全局引入ElementPlus：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

接下来，创建一个简单的CRUD界面：

<template>
  <el-button @click="handleAdd">添加</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="resetForm">
    <el-form :model="form">
      <el-form-item label="日期">
        <el-input v-model="form.date"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script>
import { ref } from 'vue'
 
export default {
  setup() {
    const tableData = ref([
      { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      // ...更多数据
    ])
    const dialogVisible = ref(false)
    const dialogTitle = ref('')
    const form = ref({ date: '', name: '', address: '' })
 
    const handleAdd = () => {
      dialogTitle.value = '添加'
      dialogVisible.value = true
    }
 
    const handleEdit = (index, row) => {
      dialogTitle.value = '编辑'
      dialogVisible.value = true