数据适时添加修改 对比接口数据

问题遇到的现象和发生背景

一个介绍 一个按钮既要添加也要修改和删除 是一个接口但是change_type不一样

问题相关代码，请勿粘贴截图

<template>
    <el-dialog width="1500px" :model-value="props.modelValue" title="添加老师" center :before-close="beforeClose">
        <el-table
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center', background: '#f2f2f2' }"
            stripe
            :border="true"
            :align="'center'"
            style="width: 100%"
            empty-text="暂无数据"
            max-height="550px"
            :data="tableTeachers"
        >
            <el-table-column label="序号" width="60" type="index" />
            <el-table-column label="姓名" width="130">
                <template #default="scope">
                    <div class="picked-teachers">
                        <div v-if="scope.row.t_name">{{ scope.row.t_name }}div>
                        <el-button type="primary" size="small" @click="handlePickTeacher(scope.$index, scope.row)">
                            {{ scope.row.t_name ? '重新选择' : '选择老师' }}
                        el-button>
                    div>
                template>
            el-table-column>
            <el-table-column prop="image" label="照片">
                <template #default="scope">
                    <div class="demo-image">
                        <el-upload
                            class="avatar-uploader"
                            :action="action"
                            :headers="myHeaders"
                            :show-file-list="false"
                            :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, scope.$index)"
                            :before-upload="beforeAvatarUpload"
                        >
                            <img v-if="scope.row.image" :src="scope.row.image" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus />el-icon>
                        el-upload>
                        <span class="demonstration">上传照片span>
                    div>
                template>
            el-table-column>
            <el-table-column prop="introduce" width="500" label="简介">
                <template #default="scope">
                    <el-input
                        v-model="scope.row.content"
                        :maxlength="500"
                        :autosize="{ minRows: 6, maxRows: 16 }"
                        type="textarea"
                        show-word-limit
                        placeholder="(内容不超过500字)"
                    />
                template>
            el-table-column>

            <el-table-column prop="" label="排序" width="300">
                <template #default="scope">
                    <img style="padding: 0 10px" src="./image/top.png" :disable="scope.row == 0" @click="hanleUp(scope.row, scope.$index)" />
                    <img style="padding: 0 10px" src="./image/up.png" :disable="scope.row == 0" @click="handleTop(scope.row, scope.$index)" />
                    <img
                        style="padding: 0 10px"
                        src="./image/down.png"
                        :disable="scope.$index + 1 == tableTeachers.length"
                        @click="handleDown(scope.row, scope.$index)"
                    />
                    <img
                        style="padding: 0 10px"
                        src="./image/bottom.png"
                        :disable="scope.$index == tableTeachers.length"
                        @click="handleLow(scope.row, scope.$index)"
                    />
                template>
            el-table-column>
            <el-table-column prop="" label="删除" width="150">
                <template #default="scope">
                    <el-icon :size="30" @click.prevent="deleteRow(scope.$index)">
                        <Delete />
                    el-icon>
                template>
            el-table-column>
        el-table>
        <el-button type="primary" class="add-teacher" @click="onAddItem">添加老师el-button>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="handSubmit">提交el-button>
                <el-button plain @click="beforeClose">取消el-button>
            span>
        template>
        <DesignateTeacher v-if="isDesignateTeacher" v-model="isDesignateTeacher" @handleTeacher="handleTeacher">DesignateTeacher>
    el-dialog>
template>

<script setup>
import { ref } from 'vue'

import { setFamousTeacherIntroduce } from '@/api/famous-teacher'
import { ElMessage } from 'element-plus'
import DesignateTeacher from './designate-teacher.vue'
import { BASE_URL } from '@/api/request/config.js'
// import { getCookie } from '@/api/request/axios.js'

const emits = defineEmits(['update:modelValue', 'auditingPrice', 'confirm', 'reflash'])

const props = defineProps({
    modelValue: { type: Boolean },
    getData: { type: Array },
})
console.log(props.getData)
const selectionArray = ref([])
const pickTeacher = (data) => {
    selectionArray.value = data
}

const isDesignateTeacher = ref(false)
const indexValue = ref('')
const handlePickTeacher = (index, val) => {
    console.log(val)
    console.log(index)
    indexValue.value = index
    isDesignateTeacher.value = true
}

const tableTeachers = ref([...JSON.parse(JSON.stringify(props.getData))])
// const selectTypeValue = ref(0) //类型选择
const setFamousTeacherIntroduces = async () => {
    let params = {
        change_type: 1, //类型:1:添加;2:修改,3:删除
        introduce: [
            {
                image: '', //头像
                content: '', //简介
                teacher_id: '',
            },
        ],
    }
    await setFamousTeacherIntroduce(params)
}

const setAuditingTeacherIntroduces = async () => {
    let params = {
        change_type: 2, //类型:1:添加;2:修改,3:删除
        introduce: [
            {
                image: '', //头像
                content: '', //简介
                teacher_id: '',
            },
        ],
    }
    await setFamousTeacherIntroduce(params)
}

const setDeleteTeacherIntroduces = async () => {
    let params = {
        change_type: 3, //类型:1:添加;2:修改,3:删除
        introduce: [
            {
                image: '', //头像
                content: '', //简介
                teacher_id: '',
            },
        ],
    }
    await setFamousTeacherIntroduce(params)
}

//上传照片
const imageUrl = ref('')
const myHeaders = { Authorization: localStorage.getItem('_UTK') } //获取Token
// "http://ht.xbkids.cn/api/"是连的本地环境，'file': 'guidance/set/upload/teacher/head'是 上传图片的接口
const action = ref('http://ht.xbkids.cn/api/' + 'guidance/set/upload/teacher/head')
const handleAvatarSuccess = (res, file, fileList, index) => {
    // console.log(index)
    imageUrl.value = URL.createObjectURL(file.raw)
    tableTeachers.value[index].image = imageUrl.value
}

//上传校验
const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/png' || 'image/jpg' || 'image/jpeg'
    const isLt4M = file.size / 1024 / 1024 < 4
    if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/JPEG 格式!')
    }
    if (!isLt4M) {
        this.$message.error('上传头像图片大小不能超过4MB!')
    }
    return isJPG && isLt4M
}

const handleTeacher = (data) => {
    // console.log(tableTeachers.value[indexValue.value])
    tableTeachers.value[indexValue.value].t_name = data.t_name
    tableTeachers.value[indexValue.value].t_id = data.t_id
}

//添加老师
const onAddItem = () => {
    tableTeachers.value.push({
        content: '',
        id: 0,
        image: '',
        t_name: '',
    })
}

//确认
const handSubmit = async () => {
    // console.log(tableTeachers.value)
    let introduce = tableTeachers.value.map((v) => {
        return {
            teacher_id: v.t_id,
            image: v.image,
            content: v.content,
        }
    })
    let params = {
        change_type: 1,
        introduce,
    }
    let res = await setFamousTeacherIntroduce(params)
    console.log(res)
    emits('update:modelValue', false)
    emits('reflash')
}

//删除
const deleteRow = (index) => {
    tableTeachers.value.splice(index, 1)
    setDeleteTeacherIntroduces()
}

//排序
const hanleUp = (row, index) => {
    tableTeachers.value.splice(index, 1)
    tableTeachers.value.unshift(row)
}
const handleTop = (row, index) => {
    if (index > 0) {
        let upDate = tableTeachers.value[index - 1]
        tableTeachers.value.splice(index - 1, 1)
        tableTeachers.value.splice(index, 0, upDate)
    } else {
        ElMessage({
            message: '已经是第一条,上移失败',
            type: 'warning',
        })
    }
}
const handleDown = (row, index) => {
    if (index + 1 == tableTeachers.value.length) {
        ElMessage({
            message: '已经是最后一条,下移失败',
            type: 'warning',
        })
    } else {
        console.log(88888)
        let downDate = tableTeachers.value[index + 1]
        tableTeachers.value.splice(index + 1, 1)
        tableTeachers.value.splice(index, 0, downDate)
    }
}
const handleLow = (row, index) => {
    tableTeachers.value.splice(index, 1)
    tableTeachers.value.push(row)
}

const beforeClose = () => {
    emits('update:modelValue', false)
}
script>

<style lang="scss" scoped>
.header {
    height: 50px;
    line-height: 50px;
    margin-left: 15px;
    font-size: 18px;
}
.el-table {
    margin-top: 15px;
    .el-table-column {
        .introduce {
            .scrollbar-demo-item {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                margin: 10px;
                text-align: center;
                border-radius: 4px;
                background: var(--el-color-primary-light-9);
                color: var(--el-color-primary);
            }
        }
    }
}
.add-teacher {
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-left: 648px;
}
.dialog-footer {
    margin-top: -26px;
    display: flex;
    justify-content: center;
    // .el-button {
    //     display: flex;
    //     justify-content: center;
    // }
}
style>

运行结果及报错内容

不报错

我的解答思路和尝试过的方法

首先判断数据长度是否有变 有变化就是添加 没有变化的话在判断内容是否有变化 有就是修改没有就关闭窗口

我想要达到的结果

点击提交可以自动更新数据无论是删除添加还是修改

添加，修改，删除数据同一个接口的话，type不同可以这样判断，一般来说新数据是没有id（每条数据的唯一值），那么首先判断数据是否存在id，没有就调添加接口，那么第二步判断这个数据里面长度是否有变化，有就是删除，没有则是修改

那你的这个思路
首先判断数据长度是否有变 有变化就是添加 没有变化的话在判断内容是否有变化 有就是修改没有就关闭窗口
就可以 。至于你说的点击提交可以自动更新数据无论是删除添加还是修改 这个只需要调用 获取 表格数据的接口就行了吧

一个接口就非要搞成一个按钮吗？不能有取消、确认、删除按钮？根据按钮按钮不同传不同的 type
常规做法都是这样

change_type: 3, //类型:1:添加;2:修改,3:删除

let type=1
if(添加){
type=1
}else if(修改){
type=2
}else if(删除){
type=3
}
 change_type: type, 

或者根据点击不同,传入不同的数字

const setFamousTeacherIntroduces = async (type) => {
    let params = {
        change_type: type, //类型:1:添加;2:修改,3:删除
        introduce: [
            {
                image: '', //头像
                content: '', //简介
                teacher_id: '',
            },
        ],
    }
    await setFamousTeacherIntroduce(params)

也不页面截个图，添加修改同一个按钮我能懂，删除还能同一个按钮了？好吧，没有页面，我并没有看懂实际情况，也不知道上面那些大神是不是真的会去把代码从头理一遍