Vue动态根据配置动态生成Form表单及table动态显示列

通过配置能够获取到列表，根据列表生成表单及

自己最近在使用elementui-admin 有这么个需求：根据不同的类型去配置不同类型的数据对应的字段（多个）；新增的时候根据选择不同的类型动态生成Form表单中的列；查询的时候根据不同类型在table中显示不同的列。

首先根据选择的类型去查询动态的列信息

......
data() {
	return() {
		......,
		rules: [],
		listQuery: {
			userName: '',
			......
		},
		......
	}
},
mounted() {
	......,
	// 获取类型
    this.getTypeList()
    ......,
},
methods: {
......
	/** 获取类型 **/
    async getTypeList() {
      await typeList().then(response => {
        this.typeList = response.data
        if (this.typeList .length > 0) {
          this.listQuery.type = this.typeList[0].id
          // 获取动态字段信息
          this.getDynamicField(this.listQuery.type)
        }
      }).catch(error => {
 			......
      })
    },
},
/** 动态获取列的名称及key */
getDynamicField(typeId) {
  // 查询表单中字段列表
  this.queryFieldNameList = []
  // table中显示字段列表
  this.showListNameList = []
  // 新增|修改时候的必填校验规则--每次修改类型后都会动态情况校验规则
  this.rules = {}
  if (typeId !== '') {
  	// 查询列表数据
    this.getList()
    // 如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
    getDynamicField(typeId).then(response => {
      // 返回的数据有-数据库字段dbName如：XXX_XXX；还有javabean属性-humpName如：xxxXXX 驼峰格式;还有显示名称bussniessName如：商品名称。
      this.addFieldNameList= response.data
      this.queryFieldNameList = this.addFieldNameList.filter(item => item.fieldName.startsWith('XXX_XXX'))
      this.showListNameList = this.addFieldNameList.filter(item => item.fieldName.startsWith('XXX_'))
    }).catch(error => {
    	......
    })
  }
},

获取到后，则根据需要进行遍历将字段都显示到对应的区域，这里注意查询条件listQuery中有属性与返回值humpName对应如：listQuery中的userName,返回的列表中一条数据如下：
{ ‘humpName’：‘userName’, ‘bussniessName’: ‘用户名’, ‘dbName’: ‘USER_NAME’, ‘dataType’: ‘VARCHAR2’ … }；这样就能对应上了，代码如下：

......
<!-- 查询条件 -->
 <el-col v-for="(item, index) in queryFieldNameList " :key="index" :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}">
 	<el-form-item :label="item.bussniessName">
    	<el-input v-model="listQuery[item.humpName]" :placeholder="'请输入'+item.bussniessName" class="filter-item" />
    </el-form-item>
</el-col>
......
......
<!-- table中显示 -->
<el-table-column v-for=" (item, index) in showListNameList" :key="index" :label="item.bussniessName" width="150" align="center" :resizable="false">
	<template slot-scope="scope">
    	{{ scope.row[item.humpName] }}
    </template>
</el-table-column>
......

通过以上的实例就可以动态的进行查询条件展示及列表中列的动态展示。

再次展示下新增时候Form表单中的数据

每次点击新增按钮时候进行拼接rules，如下

......
	/** 点击创建方法 */
    handleCreate() {
    	......
    	// 生成新的校验规则
      	this.$set(this.rules, 'id', [{ required: true, message: '请选择类型', trigger: 'change' }])
      	this.$set(this.rules, 'bizKey1', [{ required: true, message: '请选择类型', trigger: 'change' }])
      	this.$set(this.rules, 'bizKey2', [{ required: true, message: '请选择类型', trigger: 'change' }])
      	this.getFieldNameList.forEach(item => {
        	const arr = []
        	if (item.dataType === 'TIMESTAMP(6)') {
          		const obj1 = { required: true, message: '请选择' + item.bussniessName, trigger: 'change' }
          		arr.push(obj1)
       	 	} else {
          		const obj1 = { required: true, message: '参数值不能为空', trigger: 'blur' }
          		const obj2 = { max: 32, message: '不超过32个字符', trigger: 'blur' }
          		arr.push(obj1)
          		arr.push(obj2)
        	}
        	this.$set(this.rules, item.humpName, arr)
        })
    	......
    },
.......

表单的显示如下,通过以下代码生成动态表单

<el-row v-for="(item, index) in addFieldNameList" :key="index">
  <el-col v-if="item.dateType === 'VARCHAR2'" :span="24">
    <el-form-item :label="item.bussniessName" :prop="item.humpName">
      <el-input v-model="temp[item.humpName]" :placeholder="'请输入' + item.bussniessName" class="filter-item" />
    </el-form-item>
  </el-col>
  <el-col v-if="item.dateType === 'TIMESTAMP(6)'" :span="24">
    <el-form-item :label="item.bussniessName" :prop="item.humpName">
      <el-date-picker
        v-model="temp[item.humpName]"
        style="width:100%"
        type="date"
        :placeholder="'请选择' + item.bussniessName"
        class="filter-item"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
      />
    </el-form-item>
  </el-col>
  <el-col v-if="item.dateType === 'NUMBER'" :span="24">
    <el-form-item :label="item.bussniessName" :prop="item.humpName">
      <el-input v-model="temp[item.humpName]" :placeholder="'请输入' + item.bussniessName" class="filter-item" />
    </el-form-item>
  </el-col>
</el-row>

生成表单后正常操作就行，而且通过每次打开新增dialog时候生成动态的校验规则rules。

好了，以上就是我的分享，如果帮助到您了，请您点赞、转发、收藏。
您的支持是我最大的创作动力