vue表格实现行内编辑功能

效果图如下所示：

直接上代码：

html部分：

<a-table
                :rowKey="record => record['id']"
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns"
                :data-source="dataSource"
                :loading="loading"
                bordered
                :pagination="false"
                :scroll="scroll"
            >
            <!--战略薪酬-->
                <template #strategicCompensation="{text, record}">
                    <a-input v-if="editTableData[record.id]" v-model:value="editTableData[record.id].strategicCompensation" />
                    <template v-else>
                        {{ text }}
                    </template>
                </template>
                <template #action="{record}">
                    <a-button type="link" @click="editRow(record.id)" v-if="!editTableData[record.id]">修改</a-button>
                    <a-button type="link" v-else @click="saveRow(record.id)">完成</a-button>
                </template>                

</a-table>

js部分：

        const state = reactive({
            formState: {
                searchValue: "", // 表单搜索字段
                salaryDate: moment(new Date()).format("YYYY-MM")   // 日期
            },
            columns: [
                { title: "序号", dataIndex: "index", key: "index", customRender: (text: any) => `${text.index + 1}`, align: "center" },
                { title: "姓名", dataIndex: "userName", key: "userName" },
                { title: "工号", width: 120, dataIndex: "jobNo", key: "jobNo" },
                { title: "岗位", dataIndex: "postName", key: "postName" },
                { title: "OFFER定薪", width: 120, dataIndex: "offerSalary", key: "offerSalary" },
                { title: "级薪/试用期工资", width: 140, dataIndex: "periodSalary", key: "periodSalary" },
                { title: "考核系数", dataIndex: "monthExamineTimes", key: "monthExamineTimes", slots: { customRender: "monthExamineTimes" } },
                { title: "本月考核工资", width: 130, dataIndex: "monthAssessmentSalary", key: "monthAssessmentSalary" },
                { title: "本月评价", dataIndex: "monthAppraise", ellipsis: true, key: "monthAppraise", width: 150, slots: { customRender: "monthAppraise" } },
                { title: "操作", dataIndex: "action", key: "action", slots: { customRender: "action" }, fixed: "right" }
            ], // 表格列
            dataSource: [], // 数据
            selectedRowKeys: [], // 选择的行数
            editTableData: {}, //需要修改的行数
        })
        

        // 点击编辑
        const editRow = (id: any) => {
            state.editTableData[id] = JSON.parse(JSON.stringify(state.dataSource.filter((item: any) => item.id === id)[0]))
        }
        // 点击保存
        const saveRow = (id: any) => {
            Object.assign(state.dataSource.filter((item: any) => id === item.id)[0], state.editTableData[id])
            // 调用接口
            // console.log(state.editTableData[id])
            apiEditData(state.editTableData[id]).then((res: any) => {
                const { status, rel, message } = res.data
                if (status == 200 && rel) {
                    Message.success(message ? message : "编辑成功!")
                    getList()
                } else {
                    Message.error(message ? message : "编辑失败!")
                    getList()
                }
            })
            delete state.editTableData[id]
        }