实现动态表单

菜鸡一枚555

已于 2023-08-19 13:57:06 修改

阅读量231

点赞数

文章标签：前端 javascript 服务器

于 2023-08-19 13:54:19 首次发布

本文链接：https://blog.csdn.net/weixin_61978391/article/details/132379042

版权

文章讲述了如何使用Vue.js动态配置表单，包括处理文本框和下拉框，根据后端返回的数据动态展示字段，以及如何绑定和验证输入。

摘要由CSDN通过智能技术生成

添加的表单的内容是动态的可配置的，在一个页面配置好表单的内容，在另外一个页面就会显示出对应的内容

配置：可以添加

显示：

一：处理文本框

1.处理后端返回的数据

ProjectFieldList({ PId: ' ' }).then((res) => {

for (var i in res) {

if (res[i].Property === "自定义") {

var valuekey3 = ''

if (this.valuekey != []) {

for (var key in this.valuekey) {

if (key === res[i].Code) {

valuekey3 = this.valuekey[key]

}

}

}

//Code 字段 Name字段名称 Is_Required是否必填 Value文本框填写的内容

this.Custom_Fields3.push({ Code: res[i].Code, Name: res[i].Name, Is_Required: res[i].Is_Required, Id: res[i].Id, Value: valuekey3 })

this.$set(this.form, 'Custom_Fields3', this.Custom_Fields3)

}

}

// 判断固定是否必填

let assr3 = []

res.find((item) => {

if (item.Is_Required === true) {

assr3.push(item)

assr3.map(e => {

this.rules[e.Code] = [{ required: true, message: '请输入！', trigger: 'blur' }]

})

}

})

this.$set(this.rules, 'rules', this.rules)

})

2.数据处理

<el-col v-for="(item, index) in form.Custom_Fields3" :key="item.Id" :span="12">

<el-form-item :label="item.Name" :prop="'Custom_Fields3.' + index + '.Value'"

v-if="(item.Is_Required === true)" :rules="{ required: true, message: '请输入', trigger: 'blur' }">

<el-input v-model="item.Value" class="input"></el-input>

</el-form-item>

<el-form-item :label="item.Name" :prop="'Custom_Fields3.' + index + '.Value'"

v-else-if="(item.Is_Required === false)">

<el-input v-model="item.Value" class="input"></el-input>

</el-form-item>

</el-col>

二，处理下拉框

1.处理后端返回的数据

ProjectFieldList({ PId: ' ' }).then((res) => {

const list =res

this.tempList1 = [];

this.formm.certs1 = [];

list.forEach((item) => {

var dfj = "";

GetRoleInfo({ projectid: this.projectid, code: item.Code }).then(

(res) => {

if (res != []) {

dfj = res;

}

GetGroupUserListByCode({

projectid: this.projectid,

code: item.Code,

}).then((res) => {

this.formm.certs1.push({

Id: item.Code,

Label: item.Name, //字段名称

Score: item.Id,

Certificate_Time: "",

Is_Required: item.Is_Required, //是否必填

Sort:item.Sort, //排序

value: dfj, //下拉框选中的数据

lesdd: res, //下拉框可选数据

});

//排序

this.formm.certs1.sort(function (a, b) {

return a.Sort - b.Sort;

});

});

}

);

});

}）

2.数据处理

<el-form

ref="formm"

:model="formm"

inline

class="form"

label-width="140px"

>

<el-col

v-for="(item, index) in formm.certs1"

:key="item.Score"

:span="12"

>

<el-form-item

:label="item.Label"

v-if="item.Is_Required === true"

:rules="{ required: true, message: '请输入', trigger: 'blur' }"

:prop="'certs1.' + index + '.value'"

>

<el-select

v-model="item.value"

placeholder="请选择"

class="input"

filterable

default-first-option

multiple

>

<el-option

v-for="user in item.lesdd"

:key="user.Id"

:label="user.UserName"

:value="user.Id"

/>

</el-select>

</el-form-item>

<el-form-item :label="item.Label" v-if="item.Is_Required === false">

<el-select

v-model="item.value"

placeholder="请选择"

class="input"

filterable

default-first-option

multiple

>

<el-option

v-for="user in item.lesdd"

:key="user.Id"

:label="user.UserName"

:value="user.Id"

/>

</el-select>

</el-form-item>

</el-col>

</el-form>