详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
动态表单生成
创新互联一直在为企业提供服务,多年的磨炼,使我们在创意设计,营销型网站建设到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过10多年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务棕树数据中心、成都APP应用开发、手机移动建站、网页设计、网络整合营销。
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 () { let formData = new FormData() formData.append('id', this.id) let config = {headers: {'Content-Type': 'multipart/form-data'}} this.$http.post('/getform', formData, config).then(res => { this.dynamicValidateForm.domains = [] for (var j = 0; j < res.data.data.length; j++) { var obj = {} obj.label = res.data.data[j].label obj.prop = res.data.data[j].prop obj.value = res.data.data[j].value obj.editable = res.data.data[j].editable this.dynamicValidateForm.domains.push(obj) } console.log(this.dynamicValidateForm.domains) }) }
此处,是将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 () { let formData = new FormData() formData.append('id', this.id) let config = {headers: {'Content-Type': 'multipart/form-data'}} this.$http.post('/gettable', formData, config).then(res => { this.$message({ message: '查询成功!', type: 'success' }) this.cols = [] for (var j = 0; j < res.data.data.cols_list.length; j++) { var obj = {} obj.label = res.data.data.cols_list[j].label obj.prop = res.data.data.cols_list[j].prop this.cols.push(obj) } console.log(this.cols) this.tableData = [] for (var i = 0; i < res.data.data.each_row.length; i++) { this.tableData.push(res.data.data.each_row[i]) } console.log(this.tableData) }, (error) => { this.$message.error('查询失败' + error.response.data.msg) }) }
函数分析
- [x] 先清空数据,this.cols = [], this.tableData = []
- [x] cols_list是后台发回来的列定义
- [x] each_row是后台发回来的行数据
- [x] 需要注意一点,都是字符串,prop里的'name'属性和下面的'name'键名,必须要一致,是字符串的形式,则两者都必须是字符串,才会对应,不然前端访问页面时,会在控制台看到报错'T.template is not a function!'
后端代码举例:
data: { 'code': 'ok', 'cols_list': [ {prop: 'name',label: '名字'}, {prop: 'sex',label:'性别'} ], 'each_row': [ {'name': '小李','sex': '男'}, {'name': '小红','sex': '女'} ] }
[x] 致此,两个动态生成都已搞定!
以上所述是小编给大家介绍的Vue+Element动态表单动态表格详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
文章名称:详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
本文路径:http://hbruida.cn/article/jjspih.html