Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

vue

Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)


动态表单生成

ElementUI官网引导

  • Element表单生成
  • Element动态增减表单,在线代码


关键配置

  • 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)

})

}

函数分析

后端代码举例:

data: {

\'code\': \'ok\',

\'cols_list\': [

{prop: \'name\',label: \'名字\'},

{prop: \'sex\',label:\'性别\'}

],

\'each_row\': [

{\'name\': \'小李\',\'sex\': \'男\'},

{\'name\': \'小红\',\'sex\': \'女\'}

]

}

以上是 Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 的全部内容, 来源链接: utcz.com/z/379973.html

回到顶部