vue3+ts展示条项字段

 展示条项组件：

<el-form v-if="currentStep === 4" label-position="left" label-width="120px" style="display: flex;flex-wrap: wrap;justify-content: flex-start;margin-left: 138px;">
<el-row v-for="(row,rowIndex) in formRows" :key="rowIndex" :gutter="row.gutter" style="width:100%">
<el-col v-for="(item,colIndex) in row.items" :key="colIndex" :span="item.span">
<el-form-item :label="$swpT(item.label)" :required="item.required" style="margin-bottom:0;">
<el-divider class="separatorLine" direction="vertical"/>
<span v-if="item.dataKey">{{ formData[item.dataKey] }}</span>
<span v-if="!item.dataKey">&nbsp;</span>
</el-form-item>
</el-col>
</el-row>
</el-form>

<script>
const formData = reactive<StepFormData>({
project: '',
ecu: '',
nodeReview: '',
baseline: '',
chip: '',
orderCode: '',
description: '',
selfInnovateFlag: ''
});

const formRows = ref([
{
gutter: 20,
items: [
{label: 'page.swModuleDetailPlan.project', required: true, span: 12, dataKey: 'project'},
{label: 'page.swModuleDetailPlan.ecu', required: true, span: 12, dataKey: 'ecu'}
]
},
{
gutter: 10,
items: [
{label: 'page.swModulePlan.isSelf', required: true, span: 12, dataKey: 'selfInnovateFlag'},
{label: '', required: true, span: 12, dataKey: ''} // 空项
]
},
{
gutter: 10,
items: [
{label: 'page.swModulePlan.reviewNode', required: true, span: 12, dataKey: 'nodeReview'},
{label: 'page.swModuleDetailPlan.baseline', required: true, span: 12, dataKey: 'baseline'}
]
},
{
gutter: 10,
items: [
{label: 'page.swModulePlan.chip', required: true, span: 12, dataKey: 'chip'},
{label: 'page.swModulePlan.description', required: true, span: 12, dataKey: 'description'}
]
}
]);

</script>
<style less>
.separatorLine {
display: inline-block;
width: 1px;
height: 100%;
margin: 0 8px;
vertical-align: middle;
position: relative;
left: -40px;
}
</style>