详解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中万恶的function实例分析
May 25 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
js简单实现交换Li的值
May 22 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
详解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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
处理php自动反斜杠的函数代码
2010/01/05 PHP
PHP,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php文档更新介绍
2011/07/22 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
教师应聘个人求职信
2013/12/10 职场文书
小学生作文评语
2014/04/18 职场文书
小学元宵节活动总结
2015/02/06 职场文书
运动会1000米加油稿
2015/07/21 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技