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


Posted in Javascript onApril 20, 2019

动态表单生成

ElementUI官网引导

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

关键配置

  1. template中,form和form-item的写法和绑定
  2. data里的值为空
  3. 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,不可编辑。反之,可以编辑。

# 动态表格生成

关键配置

  1. el-table里,各项配置,其实和动态表单差不多
  2. data里的值为空
  3. 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)
    })
  }

函数分析

  1. [x] 先清空数据,this.cols = [], this.tableData = []
  2. [x] cols_list是后台发回来的列定义
  3. [x] each_row是后台发回来的行数据
  4. [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] 致此,两个动态生成都已搞定!

以上所述是小编给大家介绍的Vue+Element动态表单动态表格详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
基于JavaScript实现随机颜色输入框
Dec 10 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
详解vue使用$http服务端收不到参数
Apr 19 #Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 #Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 #Javascript
读懂CommonJS的模块加载
Apr 19 #Javascript
js module大战
Apr 19 #Javascript
如何根据业务封装自己的功能组件
Apr 19 #Javascript
vue项目打包上传github并制作预览链接(pages)
Apr 19 #Javascript
You might like
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
一些常用的Python爬虫技巧汇总
2016/09/28 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
详解Python字典的操作
2019/03/04 Python
python实现简单日期工具类
2019/04/24 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
使用python绘制温度变化雷达图
2019/10/18 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
实习期自我鉴定
2013/10/11 职场文书
《满井游记》教学反思
2014/02/26 职场文书
大学开学计划书
2014/04/30 职场文书
护士节策划方案
2014/05/19 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
用Python可视化新冠疫情数据
2022/01/18 Python