如何用vue3写增删改查

在 Vue3 中使用 Composition API，可以更灵活和方便地组织组件代码，下面给出一个简单示例，演示如何使用 Vue3 实现增删改查功能：

<template>
  <div>
    <el-form :model="formData" label-position="left" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addData" :disabled="isDisabled">添加</el-button>
        <el-button type="success" @click="editData" :disabled="isDisabled">编辑</el-button>
        <el-button type="danger" @click="deleteData" :disabled="isDisabled">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" @row-click="selectData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  setup() {
    // 响应式数据
    const formData = reactive({
      name: '',
      age: ''
    })

    const tableData = reactive([
      { name: '张三', age: 20 },
      { name: '李四', age: 25 },
      { name: '王五', age: 30 }
    ])

    // 当前选中的数据
    const selectedData = ref(null)

    // 是否禁用按钮
    const isDisabled = ref(true)

    // 添加数据
    const addData = () => {
      tableData.push(formData)
      ElMessage.success('添加成功')
      clearForm()
    }

    // 编辑数据
    const editData = () => {
      const index = tableData.indexOf(selectedData.value)
      tableData.splice(index, 1, formData)
      ElMessage.success('编辑成功')
      clearForm()
    }

    // 删除数据
    const deleteData = () => {
      const index = tableData.indexOf(selectedData.value)
      tableData.splice(index, 1)
      ElMessage.success('删除成功')
      clearForm()
    }

    // 选择数据
    const selectData = (row) => {
      selectedData.value = row
      formData.name = row.name
      formData.age = row.age
      isDisabled.value = false
    }

    // 清空表单
    const clearForm = () => {
      formData.name = ''
      formData.age = ''
      selectedData.value = null
      isDisabled.value = true
    }

    return {
      formData,
      tableData,
      selectedData,
      isDisabled,
      addData,
      editData,
      deleteData,
      selectData
    }
  }
}
</script>

在上面的代码中，我们使用了 Vue3 的 Composition API，通过 reactive 和 ref 函数创建了几个响应式的状态对象，包括表单数据、表格数据、当前选中的数据、是否禁用按钮等。

然后，我们定义了几个方法，包括添加数据、编辑数据、删除数据、选择数据、清空表单等。这些方法会修改状态对象中的数据，从而触发界面的更新。

最后，我们将这些方法和模板中的事件绑定起来，实现了一个简单的增删改查的功能。用户可以在表单中填写数据，然后点击添加按钮将数据添加到表格中；也可以选择表格中的一条数据，然后点击编辑或删除按钮对其进行编辑或删除。