原因：table绑定的data 与el-form的model是关联的，el-form-item校验的值必须是table中的数据，否则监听不到,自然校验不准
方法一：el-table-column中嵌套el-form使用
特点：是每一个需要校验的table-column都需要一个el-form，校验的时候需要校验多个form
优点：简单直观
缺点：column太多的话 代码体积增加/操作校验不太美观
<el-table ref="dialogTable" v-loadmore="handleScroll" class="mt_20 diaLog_table" :data="diolagList" :border="true" max-height="500">
<el-table-column prop="userName" label="姓名" show-overflow-tooltip>
<template slot-scope="scope">
<el-form ref="form3" :model="scope.row" label-width="0">
{{scope.row.name}}
<el-form-item prop="userId" :rules="[{ required: true, message: '请输入', trigger: 'change' }]">
<el-select size="mini" v-model="scope.row.userId" filterable placeholder="请输入" @change="chooseStaff">
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column prop="maxNum" label="数量" width="150px" show-overflow-tooltip >
<template slot-scope="scope">
<span v-if="scope.row.isEdit">{{ scope.row.maxNum || '--'}}</span>
<el-form ref="form4" :model="scope.row" label-width="0" v-else >
<el-form-item prop="maxNum" :rules="[{ required: true, message: '请输入', trigger: 'change' }]">
<el-input type="text" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model="scope.row.maxNum" @change="changeInput" placeholder="请输入" size="mini" maxlength="7"></el-input>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="操作" width="150px">
<template slot-scope="scope">
<span v-if="scope.row.isAddStaff==1">
<el-button type="text" size="small" @click="edit(scope.row,2)">编辑</el-button>
<!-- <el-button type="text" class="drop" size="small" @click="dropItem(scope.row,2)">移除</el-button> -->
<el-popover
placement="bottom"
width="160"
class="popver"
v-model="scope.row.visible"
>
<p>确定移除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="dropItem(scope.row,2)">确定</el-button>
</div>
<el-button slot="reference" class="drop">移除</el-button>
</el-popover>
</span>
<span v-else>
<el-button type="text" size="mini" @click="() => addMethod(scope.row,2)">保存</el-button>
<el-button type="text" size="mini" class="cancel_btn" @click="cancel(scope.row,2)">取消</el-button>
</span>
</template>
</el-table-column>
</el-table>
export default {
data(){
return{
diolagList: [],
}
},
save(){
let form1 = type==1?this.$refs.form1:this.$refs.form3
let form2 = type==1?this.$refs.form2:this.$refs.form4
let valid1 = false
let valid2 = false
if(form1){
if (form1 && form2) {
form1.validate((valid) => {
valid1 = valid
})
form2.validate((valid) => {
if (valid) {
valid2 = valid
}
})
}
}
setTimeout(async () => {
if(form1){
if (valid1 && valid2) {
校验通过的操作
}
}
}, 0)
}
}
方式二：el-form中嵌套el-table 循环el-table-column
重点在于：el-form-item的prop绑定的必须是table中的数据 :prop="'tableData.' + scope.$index + '.post'"
优点：代码少/校验方便
缺点： 1.不直观；
2.el-form-item的prop绑定不是table-column的数据的话 校验不生效
<el-form ref="form1" :model="paramsForm" label-width="0" class="tableMain">
<el-table :data="paramsForm.tableData" ref="table" border :max-height="maxHeight">
<el-table-column label="序号" type="index" align="center"></el-table-column>
<el-table-column
:label="item.label"
:prop="item.prop"
v-for="item in tabColumns"
:key="item.prop">
<template slot-scope="scope" >
<!-- <span v-if="!scope.row.isEdit"> {{ scope.row[item.prop] }}</span> -->
<template v-if="scope.column.property == 'post' && scope.row.isEdit">
<el-form-item :prop="'tableData.' + scope.$index + '.post'" :rules="paramsForm.ruleForm.post">
<el-select
v-model="scope.row.post"
size="mini"
>
<el-option
v-for="item in options"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
</template>
<template v-else-if="scope.column.property == 'allocatFlag' && scope.row.isEdit">
<el-form-item :prop="'tableData.' + scope.$index + '.allocatFlag'" :rules="paramsForm.ruleForm.allocatFlag">
<el-select
v-model="scope.row.allocatFlag"
size="mini"
>
<el-option
v-for="item in allocatList"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
</template>
<template v-else-if="scope.column.property == 'maxNum' && scope.row.isEdit" >
<el-form-item :prop="'tableData.' + scope.$index + '.maxNum'" :rules="paramsForm.ruleForm.maxNum">
<el-input v-model.trim="scope.row.maxNum" type="text" oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" placeholder="请输入" size="mini" :maxlength="3"></el-input>
</el-form-item>
</template>
<template v-else>
<span>{{ scope.row[item.prop] || "--" }}</span>
</template>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div v-if="scope.row.isEdit">
<el-button
type="text"
@click="save(scope.row)"
>保存</el-button>
<el-button
type="text"
class="color_b"
@click="scope.row.isEdit = false"
>取消</el-button>
</div>
<el-button v-else type="text" @click="edit(scope.row)" class="eidt">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
export default{
data(){
return{
paramsForm: {
tableData: [],
ruleForm:{
post:[{ required: true, message: '请选择', trigger: 'change' }],
allocatFlag:[{ required: true, message: '请选择', trigger: 'change' }],
maxNum:[{ required: true, message: '请输入', trigger: 'blur' }]
},
},
}
},
computed:{
tabColumns(){
let columns = []
columns = [
{
prop: 'treeName',
label: '列一',
canEdit:false,
},
{
prop: 'userName',
label: '列二',
canEdit:false,
},
{
prop: 'ipsPost',
label: '列三',
canEdit:false,
},
{
prop: 'post',
label: '列四',
canEdit:true,
},
{
prop: 'allocatFlag',
label: '列无',
canEdit:true,
},
{
prop: 'maxNum',
label: '列六',
canEdit:true,
}
]
return columns
},
methods:{
save(item){
this.$refs.form1.validate((valid) => {
if (valid) {
alert("111")
}else{
this.$message.warning('请完善信息！')
return;
}
})
},
}
}
