SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
        return {
            listQuery: {},
            input: '',
            flag: false,
            dynamicValidateForm: {
                domains: [
                    { type: 'input', label: 'AppId', placeholder: '请输入AppId', modelKey: 'app_id', value: "", app_id: '', styleObj: { width: '180px' } },
                    {
                        type: 'select', label: '录制类型', placeholder: '请输入类型', modelKey: 'record_type', value: "", record_type: '',
                        optionList: [{ label: '全部', value: undefined }, { label: 'RoomId', value: 0 }, { label: 'IdName', value: 1 }, { label: 'StreamId', value: 2 }]
                    }],
            },

        }
    },
    methods: {
        getList(value) {
            this.flag = value !== undefined
        }
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <el-form :model="listQuery" ref="listQuery" label-width="100px" class="demo-dynamic">
    <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" 
    :label="'域名' + index" :key="domain.label + flag" 
    :prop="domain.modelKey" :rules=  "domain.type === 'input'&& flag ? {
      required: true, message: '域名不能为空', trigger: ['blur','change']}:  []">
    
      <el-input v-if="domain.type === 'input'" v-model="listQuery[domain.modelKey] " :placeholder="domain.placeholder">
        </el-input>
        <el-select v-if="domain.type === 'select'"  v-model="listQuery[domain.modelKey]"  @change="getList" >
          <el-option v-for="(itemOption,indexOption) in domain.optionList" :key="itemOption.label+indexOption" :label="itemOption.label" :value="itemOption.value">
          </el-option>
        </el-select>
    </el-form-item>
  </el-form>
</div>
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");