ivue转element

工作中vue搭建项目。
遇到需要把ivue组件替换成element组件（不知道图啥，咱也不敢说，咱也不敢问，就改呗。）改过几个页面之后，发现里边特别多的共同点，从头扫到尾，基本改改标签，改改显示方式就可以了。故写下博客记录以下。
其中的样式是我们项目中的一些改法，其他项目的话要根据具体情况而定，基本也是微调了。
属于可以直接替换的标签
Card =》 el-card
Row =》 el-row
Col =》 el-col 进行布局的span=“12"变为:span"12”
Form =》 el-form label标签的宽度由:label-width=“190"变为 label-width=“190px”
FormItem =》 el-form-item
DatePicker=》 el-date-picker
less =》 scss
Select =》 el-select
Option =》 el-option 同时 其中的数据绑定修改 值为:value=”" 并且若为字符串类型的数字，则是加上"‘123’" 用label来绑定显示文字
$Message=》$message
i标签的变化
ivue使用type进行控制，element使用class进行控制
Icon =》i
type=“ios-add-circle-outline” =》 class=“el-icon-circle-plus-outline”
type=“ios-search” =》 class=“el-icon-search”

Table模板

Page模板 =》el-pagination

Modal 标签及控制显隐方式不同
Modal =》el-dialog
v-model=“visibleEdit” =》:visible.sync=“visibleEdit”

确认框模板

 this.$confirm('确认要操作吗?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.dotype(2, row.clauseCode, row.limitCode, row.limitLevel)}).catch(() => {this.$message({type: 'info',message: '已取消操作'})})

样式调整
查询条件下方横线
在样式中，一般是.card-title中添加

  font-size: 14px;height: 38px;line-height: 36px;text-align: left;border-bottom: 1px solid #e5e5e5;margin-bottom: 42px;margin-top: 4px;

查询条件lable靠右
在label相应span的el-col标签中添加
style=“text-align:right;”
查询条件中除input框之外的其他框长度调整
在相应标签，例如el-select中添加 style=“width:100%”

查询条件下方按钮
在其上方el-row标签中添加
style=“text-align: center;margin-top:20px;”

常见问题及调试
输入框无法输入内容 可能是因为绑定值使用的是:value，在有些情况下是不能这样绑定的，可以换做v-model试下
表单验证效果错误 可能是因为验证规则验证的属性跟表单绑定的属性不同，尤其是在使用自定义组件的时候，
路由报错或者菜单不显示 路由配置时路径问题，根据配置一层一层寻找
（0，product）不是一个函数。可能是因为引入接口的问题，根据引入，查看接口是否完全一致
undefined 查看报错是一个变量还是一个函数（函数的可能性比较多）还是一个属性。查看是否定义。然后向前，查看前面的父级元素或者对象是否定义，console打印看是否属性报错
赋值错误，给一个应为数组类型的属性赋值为字符串或是什么，一些情况下会报错

table中应显示有效或无效，但是是0或1
数据转换使用过滤器或者格式化。我的博客https://blog.csdn.net/qq_43140093/article/details/99749430有描述。
下拉列表框里显示数字。
更改格式，改为label+:value形式。
***.error is undefined,大部分情况为$Message没有换为$message.其他情况按照上方undefined进行调试

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！