详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

2023-08-24 09:27:04 74

动态表单生成

ElementUI官网引导

Element表单生成
Element动态增减表单,在线代码

关键配置

template中,form和form-item的写法和绑定
data里的值为空
methods中，向后台获取数据的函数写法

1.form,form-item,input的写法[^code]

需要注意的是，:model和ref绑定的值不能用'form'来表示，不然会出错。
也就是说下面的写法会导致运行不报错，但是结果会显示不出来
问题代码:

我上的代码里面，基本让后台传回来的数据里包含prop,label,value（输入框默认值填入）,editable(是否可编辑)四个值。
当然，如果你还想动态定义类型，就让后端多传一个type，用v-if判断一下type是input或者radio或者其他类型就行，网上也有很多类似的解读，此处仅讨论input输入框。

2.data里的值为空[^code]

data(){
return{
dynamicValidateForm:[
domains:{}
],
rules:[],
id:''
}
}

此处rules为什么不写校验规则，原因是不能判断后端会返回多少个输入框表单类型，你就不能判断你需要在domains里占用多少占位符。

如果你强行写上rules校验，会导致界面提示你输入没空（就算你确实输入了值），因为你没有在domains里写上若干个对象(如下)，但是现在的需求是让后端定义数量，所以前端不能确定多少个就不能使用下面的写法，所以就不能在rules里写校验。

问题代码:

data(){
return{
dynamicValidateForm:[
domains:{
{
prop:'',
label:''
},
{
prop:'',
label:''
}
}
],
rules:[],
id:''
}
}

3.methods中，向后台获取数据的函数写法

methods中，向后台获取数据的函数写法

showEdit(){
letformData=newFormData()
formData.append('id',this.id)
letconfig={headers:{'Content-Type':'multipart/form-data'}}
this.$http.post('/getform',formData,config).then(res=>{
this.dynamicValidateForm.domains=[]
for(varj=0;j
此处，是将id作为formData形式传参给后台，获取所需要的配置数据。
this.dynamicValidateForm.domains=[]
如上代码，每次请求前，都需要先将数据清空，要养成初始化的好习惯

prop是form-item的属性（内部，不会显示出来，除非你label没写，会默认label=prop），label是form-item显示值，value是输入框显示值，editable是布尔值，若为true,则:diabled=true,不可编辑。反之，可以编辑。
#动态表格生成
关键配置

el-table里，各项配置，其实和动态表单差不多
data里的值为空
methods中，向后台获取数据的函数写法

1.先上el-table代码







编辑




这样，每一行的数据，最后都会多一列编辑按钮
2.再看data里的数据
data(){
return{
tableData:[],
cols:[],
id:''
}
}
3.函数的写法
search(){
letformData=newFormData()
formData.append('id',this.id)
letconfig={headers:{'Content-Type':'multipart/form-data'}}
this.$http.post('/gettable',formData,config).then(res=>{
this.$message({
message:'查询成功！',
type:'success'
})
this.cols=[]
for(varj=0;j{
this.$message.error('查询失败'+error.response.data.msg)
})
}
函数分析

[x]先清空数据，this.cols=[],this.tableData=[]
[x]cols_list是后台发回来的列定义
[x]each_row是后台发回来的行数据
[x]需要注意一点，都是字符串,prop里的'name'属性和下面的'name'键名，必须要一致，是字符串的形式，则两者都必须是字符串，才会对应，不然前端访问页面时，会在控制台看到报错'T.templateisnotafunction!'

后端代码举例：
data:{
'code':'ok',
'cols_list':[
{prop:'name',label:'名字'},
{prop:'sex',label:'性别'}
],
'each_row':[
{'name':'小李','sex':'男'},
{'name':'小红','sex':'女'}
]
}
[x]致此，两个动态生成都已搞定！
以上所述是小编给大家介绍的Vue+Element动态表单动态表格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

热门推荐

随机推荐