vue2项目升级到vue3经历分享4

后端重构，如果接口做好抽象封装，只需要考虑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="