table 的增删改查包括不带接口的原生写法 也包括带接口的写法

<template>
  <div>
    <span class="left">
      <vxe-button @click="add" status="primary">新增用户</vxe-button>
      <!-- 弹框组件 -->
      <vxe-modal
        v-model="value5"
        width="500"
        show-footer
        show-close
        height="300"
        @confirm="mode === 'add' ? addComfirm() : exitComfirm(exitData)"
      >
        <template #title>
          <span>{{ mode === 'add' ? '新增用户' : '编辑用户' }}</span>
        </template>
        <template #default>
          <vxe-form
            :ref="'form'"
            :rules="rules"
            :data="formData1"
            title-width="80"
          >
            <vxe-form-item title="名称" field="name" :item-render="{}">
              <template #default="{ data }">
                <vxe-input
                  v-model.trim="data.name"
                  placeholder="请输入名称"
                  clearable
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="年龄" field="age" :item-render="{}">
              <template #default="{ data }">
                <vxe-input
                  v-model.trim="data.age"
                  placeholder="请输入年龄"
                ></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="手机号" field="phoneNumber" :item-render="{}">
              <template #default="{ data }">
                <vxe-input
                  v-model="data.phoneNumber"
                  placeholder="请输入手机号"
                ></vxe-input>
              </template>
            </vxe-form-item>
          </vxe-form>
        </template>
      </vxe-modal>
    </span>
    <!-- 表格 -->
    <vxe-table
      border
      show-header-overflow
      show-overflow
      :align="allAlign"
      :row-config="{ isHover: true }"
      :data="tableData"
    >
      <vxe-column type="seq" title="序号" width="60"></vxe-column>
      <vxe-column field="name" title="姓名"></vxe-column>
      <vxe-column field="phoneNumber" title="手机号"></vxe-column>
      <vxe-column field="age" title="年龄"></vxe-column>

      <vxe-column title="操作">
        <template slot-scope="scope">
          <vxe-button
            status="warning"
            content="编辑用户"
            @click="exit(scope.row)"
          ></vxe-button>
          <vxe-button
            status="danger"
            content="删除用户"
            @click="confirmEvent(scope.row.id)"
          ></vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <!-- 删除弹框 -->
    <!-- <vxe-button content="确认提示框" @click="confirmEvent"></vxe-button> -->
  </div>
</template>
<script>
import VXETable from 'vxe-table'
import { getList, addList, updateList, delList } from '../api/user'
export default {
  data() {
    return {
      exitIndex: '',
      exitData: '',
      mode: 'add', // add新增  exit编辑
      rules: {
        name: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'change'
          },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符' }
        ],
        age: [
          {
            required: true,
            message: '请输入年龄',
            trigger: 'change'
          }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号' },
          {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            message: '请输入正确的手机号格式',
            trigger: 'change'
          }
        ]
      },
      allAlign: null,
      value5: false,
      // 表格数据
      tableData: JSON.parse(localStorage.getItem('data')) || [
        {
          id: 10001,
          name: 'Test1',
          phoneNumber: '13342561458',
          age: 28
        },
        {
          id: 10002,
          name: 'Test2',
          phoneNumber: '13342561416',
          age: 22
        },
        {
          id: 10003,
          name: 'Test3',
          phoneNumber: '13315561416',
          age: 32
        },
        {
          id: 10004,
          name: 'Test4',
          phoneNumber: '13315561418',
          age: 24
        },
        {
          id: 10004,
          name: 'Test4',
          phoneNumber: '13315561415',
          age: 24
        },
        {
          id: '10004',
          name: 'Test4',
          phoneNumber: '13315561415',
          age: 24
        }
      ],
      // 表单定义
      formData1: {
        name: '',
        phoneNumber: '',
        age: ''
      },
      loading2: false
    }
  },
  watch: {
    tableData: {
      deep: true,
      handler(newValue) {
        localStorage.setItem('data', JSON.stringify(newValue))
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // api
    async getData() {
      const res = await getList()
      console.log(res)
      this.tableData = res
    },
    // 新增弹框
    add() {
      this.value5 = true
      this.mode = 'add'
      this.formData1 = {}
    },
    // 编辑弹框
    exit(data) {
      this.exitData = data
      this.value5 = true
      this.mode = 'exit'
      // console.log(data)
      this.formData1 = {
        name: data.name,
        phoneNumber: data.phoneNumber,
        age: data.age
      }
    },
    // 添加确定框
    async addComfirm() {
      // 验证不了
      // this.$refs.form.validateField((result) => {
      //   console.log(result)
      //   if (result) {
      //     console.log(result)

      //   } else {
      //     VXETable.modal.message({ content: '未正确输入', status: 'error' })
      //   }
      // })
      if (
        this.formData1.name === '' &&
        this.formData1.age === '' &&
        this.formData1.phoneNumber === ''
      ) {
        VXETable.modal.message({ content: '未正确输入', status: 'error' })
      } else {
        // this.tableData.push({
        //   id: Date.now(),
        //   name: this.formData1.name,
        //   phoneNumber: this.formData1.phoneNumber,
        //   age: this.formData1.age
        // })
        // ?
        await addList({
          id: Date.now(),
          name: this.formData1.name,
          phoneNumber: this.formData1.phoneNumber,
          age: this.formData1.age
        })
        this.getData()
        VXETable.modal.message({ content: '添加用户成功', status: 'success' })
        this.formData1 = {}
      }

      // localStorage.setItem('data', this.tableData)
      // console.log(id)
      // console.log('table', this.tableData.name)
      // console.log('form', this.formData1)
      // this.tableData.name = this.formData1.name,
      // (this.tableData.age = this.formData1.age),
      // (this.tableData.phoneNumber = this.formData1.phoneNumber)
    },

    // console.log(this.formData1)
    // 删除用户
    confirmEvent(id) {
      VXETable.modal.confirm('您确定要删除吗？').then(async (type) => {
        // VXETable.modal.message({ content: `点击了 ${type}` })
        // this.delUser(id)
        // console.log(111)
        await delList(id)
        VXETable.modal.message({ content: '删除成功', status: 'success' })
        this.getData()
      })
    },
    delUser(id) {
      console.log(id)
      this.tableData = this.tableData.filter((item) => item.id !== id)
    },
    // // 编辑确定框
    async exitComfirm(exitData) {
      this.exitIndex = this.tableData.findIndex((item) => {
        return item.id === exitData.id
      })
      // this.tableData[this.exitIndex] = {
      //   id: this.exitData.id,
      //   name: this.formData1.name,
      //   age: this.formData1.age,
      //   phoneNumber: this.formData1.phoneNumber
      // }
      // console.log({
      //   id: this.exitData.id,
      //   name: this.formData1.name,
      //   age: this.formData1.age,
      //   phoneNumber: this.formData1.phoneNumber
      // })
      // console.log('form', this.formData1)
      // console.log(this.exitIndex)
      // console.log(this.tableData)
      console.log({
        id: this.exitData.id,
        name: this.formData1.name,
        age: this.formData1.age,
        phoneNumber: this.formData1.phoneNumber
      })
      await updateList({
        id: this.exitData.id,
        name: this.formData1.name,
        age: this.formData1.age,
        phoneNumber: this.formData1.phoneNumber
      })
      this.getData()
      // this.$set(this.tableData, this.exitIndex, {
      //   id: this.exitData.id,
      //   name: this.formData1.name,
      //   age: this.formData1.age,
      //   phoneNumber: this.formData1.phoneNumber
      // })
      this.formData1 = {}
      // this.$forceUpdate()
    }
  }
}
</script>
<style scoped>
.left {
  display: flex;
  margin-bottom: 30px;
}
::v-deep .vxe-input--inner {
  width: 250px;
}
</style>