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

释放双眼,带上耳机,听听看~!

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

动态表单生成

ElementUI官网引导

关键配置

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

# 动态表格生成

关键配置

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

函数分析

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

人已赞赏
随笔日记

八大排序算法——基数排序(动图演示 思路分析 实例代码java 复杂度分析)

2020-11-9 4:29:23

随笔日记

Python3+unitest自动化测试初探(下篇)

2020-11-9 4:29:25

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索