1、如何在 element-ui 的event事件中增加自定义参数
<!-- 明细列表 -->
<el-table :data="midSubmitDetailTableData" border stripe style="width: 100%">
<el-table-column prop="submitAmount" label="本次交工数量"></el-table-column>
<el-table-column prop="confirmAmount" label="审核数量">
<template slot-scope="scope">
<input :value="scope.row.confirmAmount" @change="updateConfirmAmount($event, scope.row)" placeholder="请输入审核数量" />
</template>
</el-table-column>
</el-table>
updateConfirmAmount(data, row){
var _value = data.currentTarget._value;
var value = data.currentTarget.value;
},
2、el-dialog弹框居中
.el-dialog{
display: flex;
flex-direction: column;
margin:0 !important;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
/*height:600px;*/
max-height:calc(100% - 30px);
max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body{
flex:1;
overflow: auto;
}
3.element-ui中循环嵌套form表单时复杂验证规则的使用
在el的表单验证中，简单的验证官网已经写的很简单了，这里不做赘述
问题：当我们在列表循环中需要一次循环显示多个表单的<el-form-item>的时候就会出现 prop不知道如何去绑定或者在自定义验证规则的时候validator表达式里面的回调函数参数value值一直为undefined的情况。
查了好久资料终于找到原因所在，下面写出来给大家参考：
1、动态prop内绑定的属性是要和form内定义的属性名以及model绑定的值要对应上
2、prop内绑定的属性值需要把第一层循环时的父元素key值一并写上一直写到input内绑定的model值，否则会出现上面的问题
例子：
vue文件代码太多，截图看比较直观
image.png
data里面的自定义验证规则：
Vue({
data(){
return{
// 自定义校验规则
checkMessage: (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入邮箱'));
} else {
callback();
}
},
form:{
details:[
{
memberSource: "1",
comment: "司机老大",
ccsNotifyDetails:[
{
notifyType: "1",
targetStr: "1******2"
},
{
notifyType: "1",
targetStr: "1******2"
}
]
},
{
memberSource: "1",
comment: "司机老大",
ccsNotifyDetails:[
{
notifyType: "1",
targetStr: "1******2"
},
{
notifyType: "1",
targetStr: "1******2"
}
]
}
]
}
}
}
})
html里面渲染代码：
image.png
代码：
<el-form>
<el-row :gutter="20" class="notify-wrap" v-for="(item, index) in form.details">
<el-col :span="16" style="display: flex;">
<el-checkbox v-model="item['ccsNotifyDetails'][1]['notifyType']" style="position: relative; top: 7px;">邮箱</el-checkbox>
<el-form-item label-width="5px" style="margin-bottom: 0;width: 600px;"
:rules="[{validator: checkMessage , trigger: 'change' }]"
// 这里绑定prop时， details是第一层循环，必须写上，然后一层一层的一直写到
//与input绑定的v-mode的值为止，否则会出现验证规则的回调函数参数 value取不到值的问题
:prop="`details.${index}.ccsNotifyDetails.1.targetStr`">
<el-input placeholder="输入邮箱" v-model="item['ccsNotifyDetails'][1]['targetStr']"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
如果觉得这样绑定prop麻烦，还有一种就是完全自定义验证规则，自己传参数
html
<el-form-item prop="testRules" :rules="testRules('自己传参', param1，param2)" >
<el-input
v-model.trim="test"
placeholder="请输入"
/>
</el-form-item>
JS
//可以直接放在data里面
testRules: (data，param1，param2) => {
return [
{
//在这里 value值是取不到的，只能使用自己传参的data的值
validator:(rule, value, callback) => {
if(!data){
//验证不通过
callback(new Error('！表单验证'));
}
//验证通过
callback();
},
trigger: 'blur'
}
];
}
参考;https://segmentfault.com/a/1190000020921975?utm_source=sf-similar-article
https://segmentfault.com/a/1190000039886801?utm_source=sf-similar-article
4、elementui 时间日期选择器 pickerOptions参数支持自定义传参
<div class="item spec" v-else>
<div style="text-align: center;font-weight: 600; margin-top: 20px;">
出发
</div>
<el-form-item label="出发时间：" :verify="['NotNull']"
:prop="'travelInfos.' + index + '.evectionInfo[0].startTime'">
<el-date-picker v-model="item.evectionInfo[0].startTime" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd" @change="val => {subsidyCount(val, index);}" :picker-options="pickerOptions0(index,0)">
</el-date-picker>
</el-form-item>
<el-form-item label="到达时间：" :verify="['NotNull']"
:prop="'travelInfos.' + index + '.evectionInfo[0].endTime'">
<el-date-picker v-model="item.evectionInfo[0].endTime" type="date" placeholder="选择日期"
value-format="yyyy-MM-dd" :picker-options="pickerOptions1(index,0)">
</el-date-picker>
</el-form-item>
</div>
export default {
data() {
return {
pickerOptions0: {},
pickerOptions1: {},
}
},
created(){
this.pickerOptions0 = function (index,flag) {
// 返程
let date = '',dateStart = ''
if(index==0) {
// 行程1
date = this.detailForm.travelInfos[index].evectionInfo[0].endTime
}else date = this.detailForm.travelInfos[index-1].evectionInfo[1].endTime
console.log(index,flag,date)
return {
disabledDate(time) {
if(index==0 && flag==0) return time.getTime() > Date.now() - 8.64e6;
else return time.getTime() < new Date(date).getTime() - 8.64e7 || time.getTime() > Date.now() - 8.64e6
}
}
}
this.pickerOptions1 = function (index,flag) {
let date = this.detailForm.travelInfos[index].evectionInfo[flag].startTime
return {
disabledDate(time) {
return time.getTime() <= new Date(date).getTime() - 8.64e7 || time.getTime() > Date.now() - 8.64e6;
}
}
}
},
}
