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;
      },
    },

4 el-select样式问题
element-ui中使用的样式，图标可以通过\e790来构建

但在element-plus中不支持，另外多了一层el-input__wrapper

因此调整样式为

.time_input {
  .el-input__wrapper{
    border-radius: 8px;
      background-color: #4F71FF;
      border-color: #4F71FF !important;
      // color: #fff;

    .el-input.is-focus .el-input__inner,
    .el-input__inner.is-focus,
    .el-input__inner {
      width: 140px;
      border-radius: 8px;
      background-color: #4F71FF;
      border-color: #4F71FF !important;
      color: #fff;
    }
    .el-input__suffix {
        height: 40px;
      .el-select__icon {
        color: #fff;
      }
    }
  }
}

前端图标调整如下：

5 el-popover关闭的问题
在element-ui中下面的写法是可行的

但element-plus中操作后，依然不能关闭，解决方案调整为v-model:visible

 <el-popover placement="bottom-start" width="520px" trigger="click"  v-model:visible="visible">

6 el-tabs默认不打开页签的问题
之前使用element-ui 2.15.2，但即使是element-ui也是根据name属性，不知道之前这个value表示什么意思

调整后,注意tabIndex: '0',这里使用字符串而不是数值。

7 页面不进入created方法
vue 生命周期钩子

为什么页面中created方法没有执行，问题出在少了一个括号，created被认为是methods中的方法，没有作为vue生命周期的一个环节，故而出错。

7 flex布局的问题
element-plus默认使用flex布局，故而有些之前的布局，就有问题，例如下面的按钮就有错位。

// 修正添加列不对齐的问题
:deep(.el-form-item__content){
  align-items: baseline;
}

8 el-table动态render
这个导致按钮样式丢失，变成空的了。

因为在vue2中自定义组件写法是这样的

 render: (h,data) => {
              let arr = [{status:data.row.canAdd,text:'新增',authValue:'subject:add',},{status:data.row.canEdit,text:'编辑',authValue:'subject:edit',},{status:data.row.canDelete,text:'删除',authValue:'subject:delete',}]
              let that = this;
              return h('div', arr.map(function (item,index) { //遍历数据进行展示 按需匹配
                if(item.status == '1'){
                  return h('el-button',{
                    props: {
                      type: 'text',
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on:{
                      click:()=>{// 这里给了他一个打印事件，下面有展示图
                        that.onBusClick(data.row,item.text)
                      }
                    },
                    // 使用自定义指令
                    directives: [
                      {
                        name: 'auth',
                        value: item.authValue,
                        // 如有其他参数可以在此添加
                      }
                    ]
                  }, item.text)
                }
              }))
            }
          }

但vue3中的写法发生变化了，调整如下：

render: (h,data) => {
              return h('span',{style:{display:'flex',justifyContent:'flex-start'}},[
                data.row.canAdd == '1'? h(<el-button class="button" type="text"  onClick={()=>{this.onBusClick(data.row,'新增')}} v-auth="subject:add" >新增</el-button>):null,
                data.row.canEdit == '1'? h(<el-button class="button" type="text"  onClick={()=>{this.onBusClick(data.row,'编辑')}} v-auth="subject:edit">编辑</el-button>):null, 
                data.row.canDelete == '1'? h(<el-button class="button" type="text"  onClick={()=>{this.onBusClick(data.row,'删除')}} v-auth="subject:delete" >删除</el-button>):null,
              ]
              )
            }

如此上面，操作列可以出来了,但这样写指令是否生效，还需验证