好资源导航 » 文章资讯 » vue实现动态表格提交参数动态生成控件的操作

vue实现动态表格提交参数动态生成控件的操作

2023-07-12 13:24:29 77

上面要求做一个根据后台数据动态生成控件，然后让用户输入提交查询信息，然后动态生成表格在显示出来。动态控件代码如下





{{item.cnname}}:



{{item.cnname}}:

data格式如下

control:[{
name:'input1',
cnname:'输入框1',
type:'input',
value:'这里'
},{
name:'time1',
cnname:'时间范围',
type:'time',
value:null
}]

还要监听所有控件变化

computed:{
//监听所有控件变化
formData:function(){
varformData={}
this.control.forEach((item)=>{
formData[item.name]=item.value
})
returnformData
}
}

动态表格如下

需要两个数组，一个保存表格列名，一个保存表格数据

tables:[],
tableData:[dataItem:xxx,
dataName:xxx],//保存表格列名

补充知识：vuetable表格的使用(动态数据展示)

第一种方式




{{tableDataalllist[scope.$index][index]}}//当前行数据接收两个参数scope.$index;scope.row




exportdefault{
data(){
return{
//数据结构activePlayerDataPropLabelArray为label标签显示label表示当前列th的显示的值,prop表示当前'日期'列下显示date数据,'斗地主'列下显示prop为12的数据,'麻将'列下显示prop为15的数据,
activePlayerDataPropLabelArray:[{
label:'日期',
prop:'date'
},{
label:"斗地主",
prop:"12"
},{
label:'麻将',
prop:'15'
}],
gameareatable:[{
date:"2018-09-10",
12:'老k',
15:'一万'
},{
date:"2018-08-01",
12:'炸弹',
15:'一条'
},{
date:"2018-08-02",
12:'对子',
15:'五筒'
}]
}
}
}

id	name	age
1	张三	23
2	李四	15
3	王五	18

日期	斗地主	麻将
2018-09-10	老k	一万
2018-08-01	炸弹	一条
2018-08-02	对子	一万

以上这篇vue实现动态表格提交参数动态生成控件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue实现动态表格提交参数动态生成控件的操作

热门推荐

随机推荐