Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
动态表单生成
ElementUI官网引导
关键配置
template中,form和form-item的写法和绑定
data里的值为空
methods中,向后台获取数据的函数写法
1. form,form-item,input的写法[^code]
:label="domain.label"
:prop="domain.prop"
:rules="rules"
v-for="domain in dynamicValidateForm.domains">
:disabled="domain.editable"
autocomplete="off"
v-model.number="domain.value">
需要注意的是,: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代码
border
width="100%">
:key="col.prop"
:label="col.label"
:prop="col.prop"
v-for="col in cols">
label="操作"
prop="option">
编辑
这样,每一行的数据,最后都会多一列编辑按钮
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] 致此,两个动态生成都已搞定!