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

最新推荐文章于 2024-10-14 16:33:38 发布

置顶

DavidCodeLee

最新推荐文章于 2024-10-14 16:33:38 发布

阅读量7.9k

点赞数 2

分类专栏： VUE学习文章标签： vue elementui es6

本文链接：https://blog.csdn.net/qq_24746139/article/details/113246529

版权

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

自己最近在使用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 = []
  //