动态搜索条件添加删除 动态验证表单 vue+elementUI table表格错位

--- 子组件 ---
<template>
  <div style="margin-bottom: 30px;border-bottom: 1px solid #ccc">
  <!-- 插槽用来存放整体的减号-->
    <slot></slot> 
    <el-form>
      <el-form-item label="层级关系">
        <el-select v-model="aoParamsAo" placeholder="请选择" class="selectchoose marginBot">
          <el-option label="与" value="and"></el-option>
          <el-option label="或" value="or"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :model="searchForm" ref="searchForm" class="demo-dynamic" :rules="rules">
      <div class="dataform" v-for="(i,v) in searchForm.params" :key="v">
        <el-form-item
          label="关系"
          :prop="'params.'+v+'.ao'"
          :rules="{
              required: true, message: '请选择关系', trigger: 'change'
            }"
        >
          <el-select v-model="i.ao" placeholder="请选择" class="selectchoose" clearable>
            <el-option label="与" value="and"></el-option>
            <el-option label="或" value="or"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="选择字段"
          :prop="'params.'+v+'.col'"
          :rules="{
              required: true, message: '请选择字段', trigger: 'change'
            }"
        >
          <el-select v-model="i.col" placeholder="请选择查询类型" filterable @change="handleType(i.col)">
            <el-option
              :label="item.label"
              :value="item.prop"
              v-for="(item,index) in columns"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="逻辑"
          :prop="'params.'+v+'.flag'"
          :rules="{
              required: true, message: '请选择逻辑', trigger: 'change'
            }"
        >
          <el-select
            v-if="colTypes==='like'"
            v-model="i.flag"
            placeholder="请选择"
            clearable
            class="selectchoose"
          >
            <el-option label="等于" value="="></el-option>
            <el-option label="包含" value="like"></el-option>
          </el-select>
          <el-select v-else v-model="i.flag" placeholder="请选择" class="selectchoose" clearable>
            <el-option v-for="(item,v) in flagList" :key="v" v-bind="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="内容"
          :prop="'params.'+v+'.val'"
          :rules="{
              required: true, message: '请输入内容'
            }"
        >
          <el-date-picker
            v-model="i.val"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-if="(columns.find(c => c.prop===i.col)||{}).colType==='date'"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
          <el-input-number
            v-model="i.val"
            v-else-if="(columns.find(c => c.prop===i.col)||{}).colType==='num'"
            :min="-999999999999999"
            :max="999999999999999"
          ></el-input-number>
          <el-input type="text" v-model="i.val" maxlength="50" v-else clearable />
        </el-form-item>

        <el-form-item>
          <el-button
            class="remove btnheight"
            type="primary"
            icon="el-icon-minus"
            @click="deleteItem(i, v)"
          ></el-button>
          <el-button type="primary" class="btnheight" icon="el-icon-plus" @click="addDomain"></el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aoParamsAo: 'and',
      colTypes: 'like',
      flagList: [
        {
          label: '>',
          value: '>'
        },
        {
          label: '<',
          value: '<'
        },
        {
          label: '=',
          value: '='
        },
        {
          label: '>=',
          value: '>='
        },
        {
          label: '<=',
          value: '<='
        }
      ],
      searchForm: {
        params: [
          {
            ao: 'and',
            col: '',
            flag: '',
            val: ''
          }
        ]
      },
      rules: {
        ao: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'change'
          }
        ]
      }
    }
  },
  props: {
    columns: Array
  },
  methods: {
    submitForm() {
      return this.$refs.searchForm.validate()
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    /* 删除 */
    deleteItem(im, a) {
      if (this.searchForm.params.length === 1) {
        this.$message.warning('至少保留一条数据')
        this.searchForm.params = [{ ao: 'and', val: '', col: '', flag: '' }]
        return
      }
      this.searchForm.params.splice(a, 1)
    },
    /* 添加 */
    addDomain() {
      this.searchForm.params.push({
        ao: 'and',
        val: '',
        col: '',
        flag: ''
      })
    },
    handleType(val) {
      /* 传数据添加colType参数 */
      const types = this.columns.find((item) => item.prop === val)
      this.searchForm.params = this.searchForm.params.map((item) => {
        return {
          ...item,
          colType: types.colType
        }
      })
      if (types.colType === 'string') {
        this.colTypes = 'like'
      } else {
        this.colTypes = 'num'
      }
    }
  }
}
</script>

/* 父组件 */
---html
 <data-search
        :columns="columns"
        v-for="(i,index) in searchList"
        :key="i.id"
        :ref="`app_${index}`"
        :data-test="`app_${index}`"
      >
        <el-button @click="reduce(i,index)" type="primary" class="remove" icon="el-icon-minus"></el-button>
      </data-search>
      <el-button @click="addsearchList" type="primary" icon="el-icon-plus"></el-button>
      <div style="text-align:center">
        <el-button @click="resetForm" type="primary">重置</el-button>
        <el-button @click="submit" type="primary">提交</el-button>
      </div>

	 data() {
	    return {
	      searchList: [{ id: 0 }],
	      columns: [],
	      searchForm: []
	    }
	  },
  // 提交
    submit() {
      // 表单form
      const params = []
      // 验证promise
      const p = []
      for (let i = 0; i < this.searchList.length; i++) {
        const flag = this.$refs[`app_${i}`][0].submitForm()
        const form = {
          ao: this.$refs[`app_${i}`][0].aoParamsAo,
          ...this.$refs[`app_${i}`][0].searchForm
        }
        // 用来判断子组件里面的必填项是否为true
        p.push(flag)
        params.push(form)
      }
      Promise.all(p).then(() => {
        this.searchForm = params
        // 调取接口
        this.getTableList()
      })
    },
   // 添加
      addsearchList() {
      this.searchList.push({ id: Math.random() })
    },
    // 外边儿左上角的减号
    reduce(i, v) {
      if (this.searchList.length === 1) {
        return this.$message.warning('至少保留一条数据')
      }
      this.searchList.splice(v, 1)
    },
	// 重置
    resetForm() {
      this.searchList = [{ id: 0 }]
      this.searchForm = []
      // 调取子组件的resetForm的重置方法
      this.$refs.app_0[0].resetForm()
      // 重置时子组件的搜做条件为一条 
      if (this.$refs.app_0[0].searchForm.params.length > 1) {
        this.$refs.app_0[0].searchForm.params = this.$refs.app_0[0].searchForm.params.splice(
          0,
          1
        )
      }
      this.getTableList()
    },