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>