1.demo 功能如下
截屏2022-01-11 10.51.33.png
2.代码结构如下
<div style="min-height: 100px">
<el-form :model="sjqxForm" ref="siqxForm">
<el-row v-for="(v, i) in tables" :key="i" class="table-box">
<el-form :ref="v.formRef" :model="v.formData" class="table-form">
<el-table :data="v.formData.tableData">
<el-table-column
v-for="(item, index) in v.tableColumns"
:key="index + item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-form-item
v-if="item.prop == 'operations'"
:prop="'tableData.' + scope.$index + '.operations'"
:rules="tabRules.operations"
>
<el-select
v-model="scope.row.operations"
multiple
collapse-tags
:loading="scope.row.operationsLoading"
placeholder="请选择"
>
<el-option
v-for="item in operationsList"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.operations }}</span>
</el-form-item>
<el-form-item
v-else-if="item.prop == 'extraData'"
:prop="'tableData.' + scope.$index + '.extraData'"
:rules="tabRules.extraData"
>
<el-select
v-if="isAddType === 1"
v-model="scope.row.extraData"
placeholder="请选择" @visible-change="getExtraDataList($event, scope.row)"
>
<el-option
v-for="item in extraDataList"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
<span v-else>{{ scope.row.extraDataLabel }}</span>
</el-form-item>
<el-form-item
v-else-if="item.prop == 'objName'"
:prop="'tableData.' + scope.$index + '.objName'"
:rules="tabRules.obj"
>
<template v-if="isAddType === 1">
<el-select
v-if="scope.row.dsType === 'HDFS'"
v-model="scope.row.objName"
multiple
collapse-tags
filterable
remote
reserve-keyword
placeholder="请选择"
clearable
:remote-method="queryHdfsData"
@visible-change="
getObjNameList(
$event,
scope.row.extraData.value,
scope.row
)
"
>
<el-option
v-for="item in objNameList"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
<el-select
v-else
v-model="scope.row.objName"
multiple
collapse-tags
clearable
placeholder="请选择"
:loading="scope.row.objNameLoading"
@visible-change="
getObjNameList(
$event,
scope.row.extraData.value,
scope.row
)
"
>
<el-option
v-for="item in objNameList"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
</template>
<span v-else>{{ scope.row.objNameLabel }}</span>
</el-form-item>
<el-form-item
v-else-if="item.prop == 'recursion'"
:prop="'tableData.' + scope.$index + '.recursion'"
:rules="tabRules.recursion"
>
<el-select
v-model="scope.row.recursion"
placeholder="请选择"
>
<el-option label="不包含" :value="0"> </el-option>
<el-option label="包含" :value="1"> </el-option>
</el-select>
</el-form-item>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</el-table-column>
<el-table-column
prop="extraData"
v-if="isAddType !== 1"
width="200px"
:show-overflow-tooltip="true"
label="标识详情"
>
<template slot-scope="scope">
<span>{{ scope.row.extraData }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button
type="text"
size="small"
:disabled="isAddType !== 1"
@click="
addRow(v.formData.tableData, scope.$index, scope.row)
"
>添加</el-button
>
<el-button
type="text"
size="small"
:disabled="isAddType !== 1"
@click="
delRow(v.formData.tableData, scope.$index, scope.row)
"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form>
</el-row>
</el-form>
</div>
export default{
tables: [],
tableColumns: {
HDFS: [
{ prop: "dsTypeLabel", label: "数据类型", width: "100px" },
{ prop: "objName", label: "路径", width: "300px" },
{ prop: "operations", label: "操作权限", width: "" },
{ prop: "recursion", label: "是否包含子文件", width: "200px" }
],
HIVE: [
{ prop: "dsTypeLabel", label: "数据类型", width: "100px" },
{ prop: "extraData", label: "库名", width: "" },
{ prop: "objName", label: "表名", width: "200px" },
{ prop: "operations", label: "操作权限", width: "200px" }
],
KUDU: [
{ prop: "dsTypeLabel", label: "数据类型", width: "100px" },
{ prop: "extraData", label: "库名", width: "" },
{ prop: "objName", label: "表名", width: "200px" },
{ prop: "operations", label: "操作权限", width: "200px" }
]
}
3.校验规则
tabRules: {
obj: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
extraData: [
{
required: true,
message: "请选择",
trigger: "change"
}
],
perations: [
{
red: true,
age: "请选择",
igger: "change"
}
],
operations: [
{
required: true,
message: "请选择",
trigger: "change"
}
]
},
4.设置props
:prop="'tableData.' + scope.$index + '.operations'"
5.使用promise 做每个表单的校验
let newArr = []; //承接promise的返回结果
let _self = this;
this.tables.forEach((item, index) => {
//将有权限的表单做校验等等
checkForm(item.formRef); //校验
});
function checkForm (arrName) {
//根据form表单的ref，动态生成promise，再对其坐表单校验，都通过了再去做处理
let result = new Promise(function (resolve, reject) {
_self.$refs[arrName][0].validate(valid => {
if (valid) {
resolve();
} else {
reject();
}
});
});
newArr.push(result); //push 得到promise的结果
}
// 校验通过
Promise.all(newArr)
.then(() => {
console.log('所有表单校验通过')
}
