饿了么UI表格输入及其验证
项目场景:
再使用elemenui时,时常需要表格输入及其验证
问题描述:
elementui表格输入时无法使用el-form表单验证
<el-table
:data="form.procDTLList"
height="400px"
max-height="400px"
border
show-header
>
<el-table-column label="启动条件" min-width="50">
<template slot-scope="scope">
<el-select
v-model="scope.row.cN_S_STARTUP_COND"
filterable
placeholder="请选择"
>
<el-option
v-for="item in statype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="起始位置类型" min-width="50">
<template slot-scope="scope">
<el-select
v-model="scope.row.cN_N_START_BIT_TYPE"
filterable
placeholder="请选择"
>
<el-option
v-for="item in stabitype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="起始仓库" min-width="50">
<template slot-scope="scope">
<el-input v-model="scope.row.cN_S_START_STOCK" placeholder="" />
</template>
</el-table-column>
<el-table-column label="起始位置" min-width="50">
<template slot-scope="scope">
<el-input v-model="scope.row.cN_S_START_BIT" placeholder=""><i
slot="suffix"
@click="showdialog('cN_S_START_BIT',scope.$index)"
class="el-input__icon el-icon-search"></i></el-input>
</template>
</el-table-column>
<el-table-column label="目的位置类型" min-width="50">
<template slot-scope="scope">
<el-select
v-model="scope.row.cN_N_END_BIT_TYPE"
filterable
placeholder="请选择"
>
<el-option
v-for="item in stabitype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="目的仓库" min-width="50">
<template slot-scope="scope">
<el-input v-model="scope.row.cN_S_END_STOCK" placeholder="" />
</template>
</el-table-column>
<el-table-column label="目的位置" min-width="50">
<template slot-scope="scope">
<el-input v-model="scope.row.cN_S_END_BIT" placeholder=""><i
slot="suffix"
@click="showdialog('cN_S_END_BIT',scope.$index)"
class="el-input__icon el-icon-search"></i></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" min-width="50">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.cN_S_REMARK" placeholder="" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<el-button
type="success"
size="mini"
icon="el-icon-circle-plus-outline"
v-if="scope.row.show === 'true'"
plain
@click="pushNewEducation(scope.$index)"
>
</el-button>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
plain
@click="deleteEducation(scope.$index)"
>
</el-button>
</template>
</el-table-column>
</el-table>
<el-form ref="ruleForm" label-width="100px">
<el-form-item label-width="0">
<el-button
type="warning"
style="margin-top: 20px"
class="button"
@click="next"
>提交</el-button
>
</el-form-item>
解决方案:
这里提供一种方案 那就是使用elementui的form 用 form包裹住elementui的table 再给每一个添加验证data()代码片
。
form: {
procDTLList: [
{
cN_GUID: "",
cN_S_PROCESS_CODE: "",
cN_S_START_BIT: "",
cN_S_END_BIT: "",
cN_S_REMARK: "",
cN_N_END_BIT_TYPE: "",
cN_N_START_BIT_TYPE: "",
cN_S_END_STOCK: "",
cN_S_STARTUP_COND: "",
cN_S_START_STOCK: "",
],
show: "true",
},
],
},
添加方法()代码片
。
pushNewEducation(index) {
console.log("index", index);
var list = this.form.procDTLList;
if (
index == 0 &&
this.form.procDTLList[index].cN_S_START_BIT !=
this.form.procDTLList[index].cN_S_END_BIT
) {
this.bit.push(this.form.procDTLList[index].cN_S_START_BIT);
this.bit.push(this.form.procDTLList[index].cN_S_END_BIT);
list[index].show = "false";
list.push({
cN_GUID: "",
cN_S_PROCESS_CODE: this.code,
cN_S_START_BIT: "",
cN_S_END_BIT: "",
cN_S_REMARK: "",
cN_N_END_BIT_TYPE: "",
cN_N_START_BIT_TYPE: "",
cN_S_END_STOCK: "",
cN_S_STARTUP_COND: "",
cN_S_START_STOCK: "",
procDeviceList: [
{
cN_SUB_PROC_GUID: "",
cN_S_PROGRAM_CODE: "",
cN_S_ACTION_CODE: "",
cN_S_DEVICE_CODE: "",
cN_S_REQ_TYPE: "",
cN_N_PUBLISH_EVENT: "",
show: "true",
},
],
show: "true",
});
list[index + 1].cN_GUID = this.newGuid();
this.form.procDTLList[index + 1].procDeviceList[0].cN_SUB_PROC_GUID =
list[index + 1].cN_GUID;
} else {
if (this.bit[0] == this.form.procDTLList[index].cN_S_END_BIT) {
Message({
message: "维护已结束",
type: "success",
duration: 3 * 1000,
});
return;
}
if (
this.form.procDTLList[index].cN_S_START_BIT ==
this.form.procDTLList[index].cN_S_END_BIT
) {
Message({
message: "起始目的位置错误",
type: "error",
duration: 3 * 1000,
});
} else {
if (
this.bit[this.bit.length - 1] ==
this.form.procDTLList[index].cN_S_START_BIT &&
(this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) ==
-1 ||
this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) == 0)
) {
list[index].show = "false";
list.push({
cN_GUID: "",
cN_S_PROCESS_CODE: this.code,
cN_S_START_BIT: "",
cN_S_END_BIT: "",
cN_S_REMARK: "",
cN_N_END_BIT_TYPE: "",
cN_N_START_BIT_TYPE: "",
cN_S_END_STOCK: "",
cN_S_STARTUP_COND: "",
cN_S_START_STOCK: "",
procDeviceList: [
{
cN_SUB_PROC_GUID: "",
cN_S_PROGRAM_CODE: "",
cN_S_ACTION_CODE: "",
cN_S_DEVICE_CODE: "",
cN_S_REQ_TYPE: "",
cN_N_PUBLISH_EVENT: "",
show: "true",
},
],
show: "true",
});
list[index + 1].cN_GUID = this.newGuid();
this.form.procDTLList[
index + 1
].procDeviceList[0].cN_SUB_PROC_GUID = list[index + 1].cN_GUID;
if (
!this.bit.indexOf(this.form.procDTLList[index].cN_S_END_BIT) == 0
) {
this.bit.push(this.form.procDTLList[index].cN_S_END_BIT);
}
} else {
Message({
message: "位置错误",
type: "error",
duration: 3 * 1000,
});
}
}
}
console.log("bit++++++", this.bit);
},
删除代码片
。
deleteEducation(index) {
console.log("index", index);
var list = this.form.procDTLList;
if (index == 0) {
this.bit.splice(0, 2);
}
if (index != 0 && index + 1 < this.bit.length) {
this.bit.splice(index + 1, 1);
}
console.log("bit++++++", this.bit);
if (index === 0 && list.length === 1) {
list.splice(index, 1);
list.push({
cN_GUID: "",
cN_S_PROCESS_CODE: this.code,
cN_S_START_BIT: "",
cN_S_END_BIT: "",
cN_S_REMARK: "",
cN_N_END_BIT_TYPE: "",
cN_N_START_BIT_TYPE: "",
cN_S_END_STOCK: "",
cN_S_STARTUP_COND: "",
cN_S_START_STOCK: "",
procDeviceList: [
{
cN_SUB_PROC_GUID: "",
cN_S_PROGRAM_CODE: "",
cN_S_ACTION_CODE: "",
cN_S_DEVICE_CODE: "",
cN_S_REQ_TYPE: "",
cN_N_PUBLISH_EVENT: "",
show: "true",
},
],
show: "true",
});
list[0].cN_GUID = this.newGuid();
list[0].procDeviceList[0].cN_SUB_PROC_GUID = list[0].cN_GUID;
} else {
list.splice(index, 1);
}
if (index === list.length) {
list[index - 1].show = "true";
}
this.form.procDTLList = list;
},
template内代码片
。
<el-card>
<el-form
:model="form"
:rules="formdtl"
ref="formdtl"
label-position="left"
label-width="10px"
>
<el-table
:data="form.procDTLList"
height="400px"
max-height="400px"
border
show-header
>
<el-table-column label="启动条件" min-width="50">
<template slot-scope="scope">
<el-form-item
:prop="'procDTLList.' + scope.$index + '.cN_S_STARTUP_COND'"
:rules="formdtl.cN_S_STARTUP_COND"
>
<el-select
v-model="scope.row.cN_S_STARTUP_COND"
filterable
placeholder="请选择"
>
<el-option
v-for="item in statype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="起始位置类型" min-width="50">
<template slot-scope="scope">
<el-form-item
:prop="'procDTLList.' + scope.$index + '.cN_N_START_BIT_TYPE'"
:rules="formdtl.cN_N_START_BIT_TYPE"
>
<el-select
v-model="scope.row.cN_N_START_BIT_TYPE"
filterable
placeholder="请选择"
>
<el-option
v-for="item in stabitype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="起始仓库" min-width="50">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.cN_S_START_STOCK" placeholder="" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="起始位置" min-width="50">
<template slot-scope="scope">
<el-form-item
:prop="'procDTLList.' + scope.$index + '.cN_S_START_BIT'"
:rules="formdtl.cN_S_START_BIT"
>
<el-input v-model="scope.row.cN_S_START_BIT" placeholder=""><i
slot="suffix"
@click="showdialog('cN_S_START_BIT',scope.$index)"
class="el-input__icon el-icon-search"></i></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="目的位置类型" min-width="50">
<template slot-scope="scope">
<el-form-item
:prop="'procDTLList.' + scope.$index + '.cN_N_END_BIT_TYPE'"
:rules="formdtl.cN_N_END_BIT_TYPE"
>
<el-select
v-model="scope.row.cN_N_END_BIT_TYPE"
filterable
placeholder="请选择"
>
<el-option
v-for="item in stabitype"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="目的仓库" min-width="50">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.cN_S_END_STOCK" placeholder="" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="目的位置" min-width="50">
<template slot-scope="scope">
<el-form-item
:prop="'procDTLList.' + scope.$index + '.cN_S_END_BIT'"
:rules="formdtl.cN_S_END_BIT"
>
<el-input v-model="scope.row.cN_S_END_BIT" placeholder=""><i
slot="suffix"
@click="showdialog('cN_S_END_BIT',scope.$index)"
class="el-input__icon el-icon-search"></i></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" min-width="50">
<template slot-scope="scope">
<el-form-item>
<el-input v-model="scope.row.cN_S_REMARK" placeholder="" />
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<el-badge
style="padding-right: 10px"
:value="form.procDTLList[scope.$index].procDeviceList.length"
>
<el-tag
@click="
index = scope.$index;
indevic = true;
"
size="medium"
>动作</el-tag
>
</el-badge>
<el-button
type="success"
size="mini"
icon="el-icon-circle-plus-outline"
v-if="scope.row.show === 'true'"
plain
@click="pushNewEducation(scope.$index)"
>
</el-button>
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
plain
@click="deleteEducation(scope.$index)"
>
</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-form ref="ruleForm" label-width="100px">
<el-form-item label-width="0">
<el-button
type="warning"
style="margin-top: 20px"
class="button"
@click="next"
>提交</el-button
>
</el-form-item>
</el-form>
</el-card>