vue elementui 动态渲染表单

最新推荐文章于 2024-08-15 23:24:24 发布

落魄切图仔

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量1.6k

点赞数

分类专栏：表单动态渲染文章标签： vue

本文链接：https://blog.csdn.net/qq_44096635/article/details/103312624

版权

表单动态渲染专栏收录该内容

1 篇文章 0 订阅

订阅专栏

根据数据动态渲染表单
不bb ，直接贴代码

//template 代码
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              size="mini"
              :rules="rules"
            >
              <el-form-item label="数据源:" prop="dbId">
                <el-select
                  v-model="ruleForm.dbId"
                  placeholder="请选择数据源"
                  @change="changeData(ruleForm.dbId)"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                :label="domain.name"
                :prop="'domains.' + i + '.value'"
                v-for="(domain,i) in ruleForm.domains"
                :key="i"
                style="marginLeft:40px"
              >
                <el-select
                  v-model="domain.value"
                  v-if="domain.type== 'table'"
                >
                  <el-option v-for="(item,i) in datasOptions" :key="i" :label="item" :value="item"></el-option>
                </el-select>
                <el-select v-model="domain.value" v-else-if="domain.type== 'column'">
                  <el-option v-for="(item,i) in columnOptions" :key="i" :label="item" :value="item"></el-option>
                </el-select>
                <el-input v-model="domain.value" v-else style="width:220px"></el-input>
              </el-form-item>
            </el-form>

	**data中数据格式**

	data() {
	return {
		   ruleForm: {
	        dbId: "",
	        domains: [
	          {
	            value: ""
	          }
	        ]
	      },
		}
	}
	//后台请求的数剧
	      let res = await this.$Axios.post(
        `${this.baseURL}/xxxx`,
        {
          sql: this.input5
        }
      );
      if (res.data) {
        this.innerVisible = true;
        this.sqlArr = this.handData(this.input5);
        this.ruleForm.domains = this.handData(this.input5);
        return false;
      }