vue elementui 动态渲染表单

根据数据动态渲染表单
不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;
      }

vue elementui 动态渲染表单_第1张图片

你可能感兴趣的:(表单动态渲染)