element-ui——踩坑

1、在调用this.$refs[formName].validate()时，没有反应

   排查：首先确保调用的方法已经执行了，其次打印 this.$refs[formName] 是否不为空，最后确保定义的 rules 无论如何都要返回callback函数

2、在使用 dialog 对话框时，会在对话框上面弹出一层遮罩层

解决方法：在el-dialog组件上添加属性  :modal-append-to-body="false"，使用 append-to-body 可以把整个蒙版插入到body中

<el-dialog title="修改密码" :visible.sync="showForm" width="300px" :modal-append-to-body="false" append-to-body>

</el-dialog>

3、在el-table表格中，如果需要获取到当前行的所有数据，需要在<template slot-scope="scope"></template>内通过scope.row获取

<el-table
        ref="table"
        :data="searchList[0]?searchList:userListBackInfo"
        style="width: 100%"
        border
        height="810"
        highlight-current-row
        @cell-click="cellClick"
        @row-click="handleRowClick"
        @current-change="currentRowChange"
        v-loading="loading"
        :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column
            prop="address"
            align="center"
            label="送餐地址">

            <template slot-scope="scope">
              <el-popover
                placement="left"
                width="400"
                trigger="click">
                <el-table :data="addrList" class="innerTable">
                  <el-table-column width="60" property="id" label="地址ID"></el-table-column>
                  <el-table-column width="60" property="isDefault" label="是否默认"></el-table-column>
                  <el-table-column width="150" property="address" label="地址名称"></el-table-column>
                  <el-table-column width="100" property="tel" label="配送电话"></el-table-column>
                  <el-table-column width="100" property="memberuid" label="会员用户名"></el-table-column>
                </el-table>
                <el-button slot="reference" @click="getAddrList(scope.row)">查看</el-button>
              </el-popover>
            </template>
          </el-table-column>
</el-table>

4、switch开关，赋值开关状态的时候，需要转换成布尔值

5、在做深层次嵌套时，需要考虑el-input无法输入的问题，

     解决方法：在输入框绑定监听，添加监听方法，使用 this.$forceUpdate()强制刷新

<el-input v-model="selectForm.minNumber" autocomplete="off" @input="this.$forceUpdate()"></el-input>

6、在table表格，使用到表尾统计行时，当表格的高度为100%时，第一次加载表格的时候，会出现统计行被挤出可视区域的问题，当改变表格的宽高时，统计行会出现，可以在模板渲染完后重新再渲染一次，已解决这个问题

getSummaries(param) {
   this.$nextTick(() => {
     this.$refs.table.doLayout();
   });
   return ['合计']
}

7、在使用表单验证器的时候，验证器字段需要与输入框 v-model 绑定的字段一致，否则校验器无法获取到 value 值

// prop与el-input中v-model绑定的字段需要一致
<el-form-item label="扣减的数量" prop="quantity">
   <el-input v-model="subtractMealTicketForm.quantity" clearable ></el-input>
</el-form-item>