当初花了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,
]
)
}
如此上面,操作列可以出来了,但这样写指令是否生效,还需验证