<el-table
ref="dictNewList"
:data="formData.dictTable"
size="mini"
border
:span-method="spanMethod"
>
<el-table-column label="系统">
<template slot-scope="scope">
{{ formData.systemName }}
</template>
</el-table-column>
<el-table-column label="字典标识">
<template slot-scope="scope">
<el-input v-model="scope.row.dictIdentifier" @blur="validateDictRow(scope.row)"
:class="{ 'is-invalid': scope.row.invalid }">>
</el-input>
</template>
</el-table-column>
<el-table-column label="字段名称">
<template slot-scope="scope">
<el-input v-model="scope.row.fieldName" @blur="validateDictRow(scope.row)"
:class="{ 'is-invalid': scope.row.invalid }"></el-input>
</template>
</el-table-column>
<el-table-column label="字段描述">
<template slot-scope="scope">
<el-input v-model="scope.row.fieldDescription" @blur="validateDictRow(scope.row)"
:class="{ 'is-invalid': scope.row.invalid }"></el-input>
</template>
</el-table-column>
<el-table-column label="字段值">
<template slot-scope="scope">
<el-input v-model="scope.row.fieldValue" @blur="validateDictRow(scope.row)"
:class="{ 'is-invalid': scope.row.invalid }"></el-input>
</template>
</el-table-column>
<el-table-column label="值描述">
<template slot-scope="scope">
<el-input v-model="scope.row.valueMeaning" @blur="validateDictRow(scope.row)"
:class="{ 'is-invalid': scope.row.invalid }"></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="80px">
<template slot-scope="scope">
<el-button type="text" @click="deleteDictRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="addNewDictRow" style="margin-top: 10px">新增</el-button>
calculateRowSpan(operTable) {
let span = 1;
let lastRow = null;
let lastSpanStart = 0;
let tempRowSpanInfo = new Array(operTable.length).fill(0);
operTable.forEach((row, index) => {
if (lastRow && this.isSameGroup(lastRow, row)) {
span++;
} else {
if (lastRow) {
tempRowSpanInfo[lastSpanStart] = span;
}
lastSpanStart = index;
span = 1;
}
lastRow = row;
});
tempRowSpanInfo[lastSpanStart] = span;
this.rowSpanInfo = tempRowSpanInfo;
},
isSameGroup(row1, row2) {
if (!row1.dictIdentifier)
return false;
return row1.dictIdentifier === row2.dictIdentifier
},
spanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex < 4) {
return {
rowspan: this.rowSpanInfo[rowIndex], colspan: 1
};
}
},
```