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

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

动态表单生成

ElementUI官网引导

* Element表单生成 <https://element.eleme.cn/#/zh-CN/component/form>
* Element动态增减表单,在线代码 <https://codepen.io/pen/?&editable=true>
关键配置

* 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] 致此，两个动态生成都已搞定！

热门工具换一换