后端重构，如果接口做好抽象封装，只需要考虑jar之间的兼容性问题，jdk版本不变，基本不用做太大的调整，但是前端就不一样，除了vue框架本身，css的调整，改起来更是让人头疼。前面写了vue2项目升级到vue3经历分享1,vue2项目升级到vue3经历分享2,vue2项目升级到vue3经历分享3,因为没有改造完，于是又写了一篇。还有7天时间，希望能顺利推进。
1 el-table-column外层不能加span
很奇怪，为什么只有两列，其他的不见。

检查代码，第一个不规范的地方，为何el-table-column外层多了一个<span>，这个再新框架里面直接就显示不了，更为严谨。

去掉之后，列出来了，说明一个问题el-table-column再el-table中很重要，列存在才可以显示。

element-ui中这么写可以，但是element-plus中，这种外面加<span>就不规范了。

一般情况下vue2使用Element UI这个组件库，表格组件的插槽的话一般都是使用v-slot，而vue3使用Element Plus组件库，表格组件中插槽一般为#default，不过不改，也能运行。调整后，问题解决。

2 $event.target使用问题
下面的代码，运行后提示 TypeError: Cannot read properties of undefined (reading 'target')

<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120">
          <template #default="scope">
            <span v-show="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}
            </span>
            <el-input v-show="scope.row.isEditCell" v-model="scope.row.remark" @blur="cellBlur(scope.row,scope.column)"  @focus="cellFocus(scope.row)" :ref="'remark'+scope.row.id" @keyup.enter.native="$event.target.blur"></el-input>
          </template>
        </el-table-column>

根据文心一言的指导，调整后代码如下,如此界面可以出来了。

<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120">
          <template #default="scope">
            <span v-show="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.remark}}
            </span>
            <el-input v-show="scope.row.isEditCell" v-model="scope.row.remark" 
            @blur="cellBlur(scope.row,scope.column)" 
             @focus="cellFocus(scope.row)" :ref="el => { if (el) scope.remarkInput = el; }" 
             @keyup.enter.native="finishEdit(scope.row)"></el-input>
          </template>
        </el-table-column>

finishEdit(row){
      row.isEditCell = false;
    },

3 this.$set is not a function

触发cellClick,这里提示this.$set不是跟函数，vue3为什么舍弃了this.$set

由于 Vue 3 使用 Proxy 使其数据属性自动成为响应式的，所以可以直接修改对象属性，而无需使用 $set。直接赋值即可。

待补充。。。