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

当初花了1个半月将十几个微服务从mybatis升级为mybatis-plus，就很自信的认为前端vue2升级到vue3也不过so so，世界过程中却是折腾，写法乱七八糟，不兼容的问题一大堆。
1 操作dom元素
this.$refs.subject[index].$children[0].$children[0].$el;在element-ui的旧系统，之所以有这段代码，是因为科目表的数据很多，当修改科目或者新增下级科目后，希望能自动移动到之前编辑的位置。
这样写法在element-plus中却直接报错。

2 attr属性获取
在element-ui中可以通过tab.$attrs.category中获取

如下面的category

它违反了 Vue 的响应式原则，需要换种写法

tabClick(tab, event) {
        // this.fcId = 1 ; //切换 设置人民币
        this.$tool.session.set('initalIndex', tab.index)
        let category = this.tabs.find(item=>item.title == tab.props.label).category;
        this.$refs.beginning[this.tabIndex].initTableList(category , this.fcId);
      },

3 v-model表达式问题
下面的35-tmpData.marginLeft的用法是不正确的，这是一个表达式，而不是数据属性。在vite中编译直接报错。

<span> 左 <el-input-number class="num" :controls='false' v-model='tmpData.marginLeft' :min="0" :max="35" /> 毫米</span>  
                <span> 右 <el-input-number class="num" :controls='false' v-model='35-tmpData.marginLeft' :max="35" disabled /> 毫米</span>

那么如何调整呢？按照计算属性来调整

 <span> 右 <el-input-number class="num" :controls='false' v-model='computeMarginLeft' :max="35" disabled /> 毫米</span>


 computed: {
      computeMarginTop(){
        return this.margins-this.tmpData.marginTop;
      },
      computeMarginLeft(){
        return 35 - this.tmpData.marginLeft;
      },
    },