详解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实现的支持lrc歌词的播放器
May 17 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
Layui实现带查询条件的分页
Jul 27 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 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python分治法定义与应用实例详解
2017/07/28 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python中的句柄操作的方法示例
2019/06/20 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
小班上学期个人总结
2015/02/12 职场文书
学期个人工作总结
2015/02/13 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
Springboot中如何自动转JSON输出
2022/06/16 Java/Android