记录vue效果之即时编辑表格字段思路

场景:要求单选，多选时候时间变为选择器可修改，但是比如选择了后，时间改了，然后又点了取消，那么就要回到最初的时间去

比如节点二最初为10-01，选了后改成了10-27，然后取消勾选，为10-01的字

解决思路

做一个key-value的数据结构，key为表格行id,value为改的值

<el-table-column label="计划完成时间">
                            <template #default="scope">
                                <div v-if="isPlannedShow(scope.row.id)">{{ scope.row.plannedFinishAt }}</div>
                                <div v-else>
                                    <el-date-picker
                                        style="width: 100%"
                                        @change="changeCopyTime($event, scope.$index)"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        v-model="tableTheme[scope.row.id]"
                                        placeholder="请选择启动时间"
                                    >
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-table-column>

 

const tableTheme = ref<any>({});
const copySelectionChange = (val: any) => {
    val.forEach((res: any) => {
        tableTheme.value[res.id] = res.plannedFinishAt;
    });
    console.log("tableTheme", tableTheme.value);