个人网站：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

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue