本文已参与「新人创作礼」活动，一起开启掘金创作之路。 列表根据分组显示，这里目的就是控制样式的设置。
tempEqbControl: [],
eqbControl: [
{
id: "d5e797be80ce43da9eed3520450c9e2f",
key: "name1",
type: 1,
label: "合同编号",
required: true,
limit: null,
},
{
id: "bb465b312cdf44f69c0990d169638ae2",
key: "mobile1",
type: 2,
label: "乙方手机号",
required: true,
limit: null,
},
{
id: "fdd668a3f148453ba1045f4b33a82a71",
key: "",
type: 3,
label: "签署日期",
required: true,
limit: "yyyy-MM-dd",
},
{
id: "6f0b663179c94d6c9b94635ec906dd6c",
key: "",
type: 6,
label: "签署区",
required: false,
limit: null,
},
{
id: "161f399648364a4cb6c77215ede379e2",
key: "",
type: 16,
label: "乙方身份证号",
required: true,
limit: null,
},
{
id: "ac98b0096fdd4310ad972a8aa054947b",
key: "",
type: 1,
label: "乙方姓名",
required: true,
limit: null,
},
{
id: "2ab1ea5ba8294fcabf0e40a4a67ddebf",
key: "",
type: 2,
label: "合同签订金额消息",
required: true,
limit: null,
},
{
id: "a13966bba09048b5b36f4696a4aa9416",
key: "",
type: 1,
label: "签订合同金额大写",
required: true,
limit: null,
},
],
//处理方法
testDealData() {
let newArr = [];
//let num=
let num = 0;
this.eqbControl.forEach((item, index) => {
if (index % 2 == 0) {
newArr.push({
num: num,
list: [item],
});
} else if (index % 2 == 1) {
//console.log(newArr,"newArr")
newArr[num].list.push(item);
num = num + 1;
}
});
this.tempEqbControl = newArr;
//console.log(this.tempEqbControl,"this.tempEqbControl");
},
vue代码
<div class="chy-box" v-show="!signingOpenShow">
<ChyTitle title="填写合同信息"></ChyTitle>
<div class="chy-box-card">
<div
class="chy-box-row"
v-for="(item, index) in tempEqbControl"
:key="index"
>
<template v-if="item.list.length % 2 == 0">
<div
class="chy-box-col"
v-for="(sonItem, indexSon) in item.list"
:key="indexSon"
>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 3"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-date-picker
v-model="sonItem.key"
type="date"
:placeholder="sonItem.label"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 1"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 2"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 6"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 8"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 16"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
</div>
</template>
<template v-else>
<div
class="chy-box-col"
v-for="(sonItem, indexSon) in item.list"
:key="indexSon"
>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 3"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-date-picker
v-model="sonItem.key"
type="date"
:placeholder="sonItem.label"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 1"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 2"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 6"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="ssonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 8"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
<el-form-item
:label="sonItem.label"
:prop="sonItem.key"
v-if="sonItem.type == 16"
:rules="[
{
required:sonItem.required,
message: sonItem.label + '不能为空',
trigger: 'blur',
},
]"
>
<el-input
v-model="sonItem.key"
:placeholder="sonItem.label"
:disabled="signingDisabled"
/>
</el-form-item>
</div>
<div class="chy-box-col"></div>
</template>
</div>
<!-- <div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="日期" prop="signingTime">
<el-date-picker
v-model="signingForm.signingTime"
type="date"
placeholder="日期"
style="width:100%;"
>
</el-date-picker>
</el-form-item>
</div>
<div class="chy-box-col">
<el-form-item label="授权区域" prop="region">
<el-input
v-model="signingForm.region"
placeholder="授权区域"
/>
</el-form-item>
</div>
</div>
<div class="chy-box-row">
<div class="chy-box-col">
<el-form-item label="总金额" prop="Amount">
<el-input
v-model="signingForm.Amount"
placeholder="总金额"
/>
</el-form-item>
</div>
<div class="chy-box-col">
<el-form-item label="大写总金额" prop="bigAmount">
<el-input
v-model="signingForm.bigAmount"
placeholder="大写总金额"
/>
</el-form-item>
</div>
</div> -->
</div>
</div>
实现效果
通过这个就可以处理很多类似的列表分组展示。比如根据日期，展示列表信息。 所以很有代表行，做了这个总结。
