释放双眼，带上耳机，听听看~！
本文目录
Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
动态表单生成
ElementUI官网引导
关键配置
- template中,form和form-item的写法和绑定
- data里的值为空
- methods中，向后台获取数据的函数写法
1. form,form-item,input的写法[^code]
<el-form :model=\"dynamicValidateForm\" label-width=\"120px\" ref=\"dynamicValidateForm\">
<el-form-item :key=\"domain.prop\"
:label=\"domain.label\"
:prop=\"domain.prop\"
:rules=\"rules\"
v-for=\"domain in dynamicValidateForm.domains\">
<el-input type=\"money\"
:disabled=\"domain.editable\"
autocomplete=\"off\"
v-model.number=\"domain.value\">
</el-input>
</el-form-item>
</el-form>需要注意的是，:model和ref绑定的值不能用\’form\’来表示，不然会出错。
也就是说下面的写法会导致运行不报错，但是结果会显示不出来
问题代码:
<el-form :model=\"form\" label-width=\"120px\" ref=\"form\">
</el-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代码
<el-table :data=\"tableData\"
border
width=\"100%\">
<el-table-column
:key=\"col.prop\"
:label=\"col.label\"
:prop=\"col.prop\"
v-for=\"col in cols\">
</el-table-column>
<el-table-column
label=\"操作\"
prop=\"option\">
<template slot-scope=\"scope\">
<el-button @click=\"edit(scope.row)\" size=\"mini\" type=\"info\">
<i class=\"el-icon-edit\"></i>
编辑
</el-button>
</template>
</el-table-column>
</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] 致此，两个动态生成都已搞定！
