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模板

<el-table-column
              type="index"
              label="序号"
              align="center"
              width="80"
            /><el-table-column
              prop="rateType"
              label="一般"
              align="center"
              width="140"
            /><el-table-column
            :formatter="changelimitLevel"
            prop="limitLevel"
            label="数据格式化"
            align="center"
            width="100"
          /><el-table-column
            label="四项操作"
            fixed="right"
            align="center"
            min-width="150"
          >
            <template slot-scope="scope">
              <el-button
                v-show="scope.row.validStatus==='1'"
                size="mini"
                type="text"
                @click="edit(scope.row)"
              >修改</el-button>
              <el-button
                v-show="scope.row.validStatus==='0'"
                size="mini"
                type="text"
                @click="Enable(scope.row)"
              >启用</el-button>
              <el-button
                v-show="scope.row.validStatus==='1'"
                size="mini"
                type="text"
                @click="disCover(scope.row)"
              >注销</el-button>
              <el-button
                v-show="scope.row.validStatus==='0'"
                size="mini"
                type="text"
              >已注销  </el-button>
            </template>
          </el-table-column>

<el-table-column prop="clauseCode" label="填写搜索下拉框" align="center" min-width="200">
                    <template slot-scope="scope">
                      <el-input size="mini" type="text" readonly :value="classTabDatas[scope.$index].kindCode" placeholder="请输入责任代码">
                        <i slot="suffix" class="el-icon-search" @click="showDutyRes(scope.$index)"></i>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="clauseCode" label="填写下拉框" align="center" min-width="200">
                    <template slot-scope="scope">
                      <el-select v-model="classTabDatas[scope.$index].deductAmount" size="mini" placeholder="请选择" style="width: 100%">
                        <el-option label="否" :value="'0'"></el-option>
                        <el-option label="是" :value="'1'"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>

Page模板 =》el-pagination

<el-pagination
              style="text-align: center;"
              :current-page="search.pageNo"
              :page-size="search.pageSize"
              :total="search.total"
              :page-sizes="[5,10,20]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="changePageSize"
              @current-change="changePageSize"
            />

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进行调试