1.demo 功能如下
截屏2022-01-11 10.51.33.png
2.代碼結(jié)構(gòu)如下
<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="標(biāo)識詳情"
>
<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: "數(shù)據(jù)類型", width: "100px" },
{ prop: "objName", label: "路徑", width: "300px" },
{ prop: "operations", label: "操作權(quán)限", width: "" },
{ prop: "recursion", label: "是否包含子文件", width: "200px" }
],
HIVE: [
{ prop: "dsTypeLabel", label: "數(shù)據(jù)類型", width: "100px" },
{ prop: "extraData", label: "庫名", width: "" },
{ prop: "objName", label: "表名", width: "200px" },
{ prop: "operations", label: "操作權(quán)限", width: "200px" }
],
KUDU: [
{ prop: "dsTypeLabel", label: "數(shù)據(jù)類型", width: "100px" },
{ prop: "extraData", label: "庫名", width: "" },
{ prop: "objName", label: "表名", width: "200px" },
{ prop: "operations", label: "操作權(quán)限", width: "200px" }
]
}
3.校驗規(guī)則
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.設(shè)置props
:prop="'tableData.' + scope.$index + '.operations'"
5.使用promise 做每個表單的校驗
let newArr = []; //承接promise的返回結(jié)果
let _self = this;
this.tables.forEach((item, index) => {
//將有權(quán)限的表單做校驗等等
checkForm(item.formRef); //校驗
});
function checkForm (arrName) {
//根據(jù)form表單的ref管跺，動態(tài)生成promise右锨，再對其坐表單校驗乾忱，都通過了再去做處理
let result = new Promise(function (resolve, reject) {
_self.$refs[arrName][0].validate(valid => {
if (valid) {
resolve();
} else {
reject();
}
});
});
newArr.push(result); //push 得到promise的結(jié)果
}
// 校驗通過
Promise.all(newArr)
.then(() => {
console.log('所有表單校驗通過')
}
