主页 / 网络编程 /

详解Vue+Element的动态表单，动态表格（后端发送配

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

动态表单生成

ElementUI官网引导


关键配置

  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"
            aulete="off"
            v-model.number="domain.value">
      </el-input>
    </el-form-item>
  </el-form>

需要注意的是，:model和ref绑定的值不能用'form'来表示，不然会出错。
也就是说狼蚁网站SEO优化的写法会导致运行不报错，结果会显示不出来
问题代码:

 <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里写上若干个对象(如下)，现在的需求是让后端定义数量，所以前端不能确定多少个就不能使用狼蚁网站SEO优化的写法，所以就不能在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: 'suess'
     })
     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'属性和狼蚁网站SEO优化的'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动态表单动态表格详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：vue路由对不同界面进行传参及跳转的总结 下一篇：详解vue使用$http服务端收不到参数

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by