Vue3.0+element-plus实现表格的增删查改

最近浅学了下vue3.0，做了个表格的demo，有增删改查的功能，记录一下，喜欢就点个赞收藏一下吧~

index.vue文件：

<template>
  <div class="box">
    <el-button class="new_btn" type="primary" @click="handleNew"
      >新增el-button
    >
    <el-table :data="studentInfo" border style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column fixed="right" label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleDetail(row)"
            >查看el-button
          >
          <el-button type="text" size="small" @click="handleEdit(row)"
            >编辑el-button
          >
          <el-button type="text" size="small" @click="handleDel(row)"
            >删除el-button
          >
        template>
      el-table-column>
    el-table>
    
    <Dialog
      v-if="dialogShow"
      v-model:dialogShow="dialogShow"
      :rowInfo="rowInfo"
      :title="title"
      :arrayNum="studentInfo.length"
      @addRow="addRow"
      @editRow="editRow"
    />
    
    <Detail v-if="detailShow" :rowInfo="rowInfo" @closeDetail="closeDetail" />
  div>
template>

<script>
import { reactive, ref, toRefs } from "vue";
import { ElMessageBox } from "element-plus";
import Dialog from "./dialog.vue";
import Detail from "./detail.vue";

export default {
  components: { Dialog, Detail },
  setup() {
    const data = reactive({
      dialogShow: false, // 新增/编辑弹框
      detailShow: false, // 详情弹窗
      rowInfo: {}, // 新增/编辑的数据
      title: "", // 是新建还是修改
      studentInfo: [
        {
          id: 1,
          name: "星星",
          sex: "女",
          age: 18,
        },
        {
          id: 2,
          name: "月亮",
          sex: "男",
          age: 19,
        },
      ],
    });
    const method = reactive({
      handleNew() {
        data.title = "新增";
        data.rowInfo = {};
        data.dialogShow = true;
      },
      handleDetail(val) {
        data.detailShow = true;
        data.rowInfo = val;
      },
      handleEdit(val) {
        data.title = "修改";
        data.dialogShow = true;
        data.rowInfo = val;
      },
      handleDel(val) {
        ElMessageBox.confirm("你确定删除这个学生的信息吗?", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            method.handleSure(val);
          })
          .catch(() => {
            // catch error
          });
      },
      handleSure(val) {
        this.dialogVisible = false;
        const index = data.studentInfo.findIndex((item) => item.id === val.id);
        data.studentInfo.splice(index, 1);
      },
      // 添加行
      addRow(val) {
        data.studentInfo.push(val);
      },
      // 编辑行
      editRow(val) {
        let index = data.studentInfo.findIndex(
          (item, index) => item.id === val.id
        );
        data.studentInfo.splice(index, 1, val);
      },
      // 关闭详情弹窗
      closeDetail() {
        data.detailShow = false;
      },
    });
    return { ...toRefs(data), ...method };
  },
};
script>

<style lang="scss" scoped>
.box {
  padding: 20px;
  margin: 50px;
  .new_btn {
    margin-bottom: 10px;
  }
  ::v-deep .el-table__cell {
    text-align: center;
  }
}
style>

dialog.vue文件：

<template>
  <el-dialog :model-value="true" :title="title" @close="handleClose">
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
    >
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="formData.name">el-input>
      el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-input v-model="formData.sex">el-input>
      el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model="formData.age">el-input>
      el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">确定el-button>
        <el-button @click="resetForm()">重置el-button>
      el-form-item>
    el-form>
  el-dialog>
template>

<script>
import { reactive, toRefs, watch, ref, h, onMounted, computed } from "vue";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    dialogShow: {
      type: Boolean,
      default: false,
    },
    rowInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    arrayNum: {
      type: Number,
      default: 0,
    },
  },
  setup(props, { emit }) {
    const data = reactive({
      dialogFlag: false,
      formData: {},
    });
    const method = reactive({
      // 关闭弹窗
      handleClose() {
        emit("update:dialogShow", false);
      },
      // 重置
      resetForm() {
        data.formData = Object.assign({}, props.rowInfo);
      },
      // 提交表单内容
      submitForm() {
        method.handleClose();
        if (props.rowInfo.name) {
          // 修改
          emit("editRow", data.formData);
        } else {
          // 新增
          data.formData["id"] = props.arrayNum + 1;
          emit("addRow", data.formData);
        }
      },
    });
    onMounted(() => {
      data.formData = Object.assign({}, props.rowInfo);
      data.dialogFlag = props.rowInfo;
    });
    return { ...toRefs(data), ...method };
  },
};
script>

<style lang="scss" scoped>
style>

detail.vue文件：

<template>
  <el-dialog :model-value="true" title="详情" @close="handleClose">
    <p>
      <label for="name">姓名：label>
      <span id="name"> {{ studentInfo.name }} span>
    p>
    <p>
      <label for="sex">性别：label>
      <span id="sex"> {{ studentInfo.sex }} span>
    p>
    <p>
      <label for="age">年龄：label>
      <span id="age"> {{ studentInfo.age }} span>
    p>
  el-dialog>
template>

<script>
import { computed, toRefs } from "vue";
export default {
  props: {
    rowInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  emit: ["closeDetail"],
  setup(props, { emit }) {
    const data = {
      studentInfo: computed(() => props.rowInfo).value,
    };
    const method = {
      handleClose() {
        emit("closeDetail");
      },
    };
    return { ...toRefs(data), ...method };
  },
};
script>

<style lang="less" scoped>
style>