个人网站:www.5ceo.cn qq群: 527796869
<div v-for="(data,index) in contentList" :key="index"> <div class="div-table"> <div class="div-tr"> <div class="div-td"> 参数名 </div> <div class="div-td"> 函数关系 </div> <div class="div-td-right"> 值 </div> </div> <div class="div-tr"> <div class="div-td"> <el-input v-model="data.measurement1" size="mini"></el-input> </div> <div class="div-td"> <el-select v-model="data.comparator1" placeholder="请选择" size="mini"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="div-td-right"> <el-input v-model="data.value1" placeholder="请输入内容" size="mini"></el-input> </div> </div> <div class="div-tr"> <div class="div-td"> <el-input v-model="data.measurement2" size="mini"></el-input> </div> <div class="div-td"> <el-select v-model="data.comparator2" placeholder="请选择" size="mini"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="div-td-right"> <el-input v-model="data.value2" placeholder="请输入内容" size="mini"></el-input> </div> </div> </div> <div style="margin-top: 15px;"> 逻辑关系 <el-button type="primary" circle size="mini">与</el-button> <el-button type="warning" circle size="mini">或</el-button> </div> <div class="div-table"> <div class="div-tr"> <div class="div-td"> 参数名 </div> <div class="div-td"> 函数关系 </div> <div class="div-td-right"> 值 </div> </div> <div class="div-tr"> <div class="div-td"> <el-input v-model="data.measurement3" size="mini"></el-input> </div> <div class="div-td"> <el-select v-model="data.comparator3" placeholder="请选择" size="mini"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="div-td-right"> <el-input v-model="data.value3" placeholder="请输入内容" size="mini"></el-input> </div> </div> <div class="div-tr"> <div class="div-td"> <el-input v-model="data.measurement4" size="mini"></el-input> </div> <div class="div-td"> <el-select v-model="data.comparator4" placeholder="请选择" size="mini"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </div> <div class="div-td-right"> <el-input v-model="data.value4" placeholder="请输入内容" size="mini"></el-input> </div> </div> </div>
</div>
data () {
return {
options: [{
value: '=',
label: '='
}, {
value: '>',
label: '>'
}, {
value: '<',
label: '<'
}, {
value: '<>',
label: '<>'
}, {value: '>=',
label: '>='
}, {value: '<=',
label: '<='
}, {value: 'not like',
label: 'not like'
}, {value: 'like',
label: 'like'
}, {value: 'is null',
label: 'is null'
}, {value: 'is not null',
label: 'is not null'}
],
contentList: [{
num: 1, // 坐标用于循环
comparator1: '',
comparator2: '',
comparator3: '',
comparator4: '',
measurement1: '',
measurement2: '',
measurement3: '',
measurement4: '',
value1: '',
value2: '',
value3: '',
value4: '',
andOr: ''
}],
})
//添加的时候只需把上面的数组中对象在添加进去即可
addLjgx () {
this.contentList.push({
num: 1,
comparator1: '',
comparator2: '',
comparator3: '',
comparator4: '',
measurement1: '',
measurement2: '',
measurement3: '',
measurement4: '',
value1: '',
value2: '',
value3: '',
value4: '',
andOr: ''
})
}
可以参考: https://blog.csdn.net/weixin_39924143/article/details/79771697