vue 根据选项生成表格_Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...

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