详解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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python实现简单中文词频统计示例
2017/11/08 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
美国高街时尚品牌:OASAP
2016/07/24 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
新生开学寄语大全
2015/05/28 职场文书
小鞋子观后感
2015/06/05 职场文书
追悼会悼词大全
2015/06/23 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书