先上图,上面名字动态,placeholder动态,提示信息动态。
看实现代码
formdata
formData: {
param: [
{
key: "systemName",
describe: "测系统名称",
value: "神州应用系统",
},
{
key: "umsIp",
describe: "数据户IP",
value: "1.1.1.1",
},
{
key: "umsPort",
describe: "数据库端口",
value: "8080",
},
],
},
html代码段
<el-form-item
v-for="(item, index) in formData.param"
:label="item.describe"
:key="item.key"
:prop="'param.' + index + '.value'"
:rules="{
required: true,
message: '请输入' + item.describe,
trigger: 'blur',
}"
>
<el-input
:placeholder="'请输入' + item.describe"
v-model="item.value"
>
<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
</el-input>
</el-form-item>
就到这里了,再晒一张效果图