vue 动态添加条件或表头

话不多说 直接看效果

代码如下：

<template>
  <div>
    <el-form ref="formRef" label-width="70px" :model="formData" autocomplete="on" @submit.prevent>
      <el-row v-for="(item, index) in formData.querys" :key="index" :gutter="16" :xs="24">
        <el-col :xs="24" :sm="9">
          <el-form-item :label="'条件' + (index + 1) + '：'" :prop="'querys.' + index + '.column'">
            <el-select
              v-model="item['column']"
              placeholder="请选择"
              filterable
              clearable
              :loading="columnListLoading"
              @change="handleColumnChange($event, item)"
            >
              <el-option
                v-for="column in index === 0 ? columnStaticList : columnList"
                :key="column.column_name"
                :label="column.column_full_name"
                :value="column.column_name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="6">
          <el-form-item
            label-width="0"
            :prop="'querys.' + index + '.op'"
            :rules="{
              required: true,
              message: '该项为必填项',
              trigger: 'blur',
            }"
          >
            <el-select v-model="item['op']" placeholder="关系选择" filterable clearable>
              <el-option
                v-for="op in index === 0
                  ? operateStringList
                  : item.column_type === 2
                  ? operateStringList
                  : operateList"
                :key="op.value"
                :label="op.label"
                :value="op.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="9">
          <el-form-item
            label-width="0"
            :prop="'querys.' + index + '.value'"
            :rules="{
              required: true,
              message: '该项为必填项',
              trigger: 'blur',
            }"
          >
            <el-select
              v-if="index === 0"
              v-model="item['value']"
              placeholder="值选择"
              style="width: calc(100% - 35px)"
              filterable
              clearable
              :loading="appListLoading"
            >
              <el-option
                v-for="app in appList"
                :key="app.app_id"
                :label="'[' + app.app_id + ']' + app.app_name"
                :value="app.app_id"
              />
            </el-select>

            <el-datetime
              v-else-if="item.column_type === 3"
              v-model="item['value']"
              style="width: calc(100% - 35px)"
              type="datetime"
              placeholder="选择日期"
            />

            <el-input
              v-else
              v-model.trim="item['value']"
              style="width: calc(100% - 35px)"
              placeholder="请输入"
            />
            <el-button
              v-if="index !== 0"
              type="danger"
              class="btn-delete"
              icon="el-icon-minus"
              circle
              @click="handleDeleteQuery(index)"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" class="btn-add" plain @click="handleClick">+ 添加</el-button>
      <el-divider />

      <el-button type="primary" @click="dialogSettingFormState = true">显示字段配置</el-button>
      <el-button type="primary" :loading="exportLoading" @click="handleExportExcel">导出</el-button>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </el-form>

    <Table
      v-model:page="currentPage"
      v-model:limit="limit"
      v-loading="tableDataLoading"
      style="margin-top: 16px"
      :data="tableData"
      :total="total"
      @pagination="handleSearch"
    >
      <el-table-column
        v-for="item in customTableHeaders"
        :key="item.column_name"
        :prop="item.column_name"
        :label="item.column_full_name"
      />
    </Table>

    <dialogSettingForm
      v-model="dialogSettingFormState"
      @handle-setting="customTableHeaders = $event"
    />
  </div>
</template>

<script>
import { getDataPrivilegeScheme } from '@/api/common'
import { getSearchProjectColumn, getSearchProject } from '@/api/userManage'
import dialogSettingForm from './dialogSettingForm.vue'

export default {
  components: {
    dialogSettingForm,
  },
  data() {
    return {
      formData: {
        querys: [
          {
            column: 'pt_register_app_ht_1d_d_o',
            op: 5,
            value: null,
            column_type: 1,
          },
        ],
      },
      columnStaticList: [
        {
          column_name: 'pt_register_app_ht_1d_d_o', // 字段名
          column_full_name: '注册应用', // 字段中文名
          column_type: 1, // 字段类型
        },
        {
          column_name: 'pt_last_login_app_ht_1d_d_o', // 字段名
          column_full_name: '最后登录应用', // 字段中文名
          column_type: 1, // 字段类型
        },
      ],
      columnList: [],
      columnListLoading: false,
      appList: [],
      appListLoading: false,
      operateList: [
        {
          label: '大于',
          value: 1,
        },
        {
          label: '小于',
          value: 2,
        },
        {
          label: '大于等于',
          value: 3,
        },
        {
          label: '小于等于',
          value: 4,
        },
        {
          label: '等于',
          value: 5,
        },
        {
          label: '不等于',
          value: 6,
        },
      ],
      operateStringList: [
        {
          label: '等于',
          value: 5,
        },
      ],

      customTableHeaders: JSON.parse(localStorage.getItem('userCircleTypeList')) || [],

      // 表格数据
      tableData: [],
      tableDataLoading: false,
      // 分页
      total: 0,
      currentPage: 1,
      limit: 50,

      dialogSettingFormState: false,

      exportLoading: false,
    }
  },
  mounted() {
    this.handleAppList()
    this.handleProjectColumn()
  },
  methods: {
    handleAppList() {
      this.appListLoading = true
      getDataPrivilegeScheme(2, 3)
        .then((res) => {
          if (res.code === 200) {
            this.appList = res.data
          }
          this.appListLoading = false
        })
        .catch(() => {
          this.appListLoading = false
        })
    },
    handleProjectColumn() {
      this.columnListLoading = true
      getSearchProjectColumn(1)
        .then((res) => {
          if (res.code === 200) {
            this.columnList = res.data
          }
          this.columnListLoading = false
        })
        .catch(() => {
          this.columnListLoading = false
        })
    },
    handleClick() {
      this.formData.querys.push({
        column: null,
        op: null,
        value: null,
        column_type: null,
      })
    },
    handleColumnChange(data, item) {
      const currentObj = this.columnList.find((item) => item.column_name === data)
      item.column_type = currentObj.column_type
    },
    handleDeleteQuery(index) {
      this.formData.querys.splice(index, 1)
    },

    handleSearch() {
      if (!this.customTableHeaders.length) {
        this.$message.info('请先点击"显示字段配置"')
        return
      }
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.tableDataLoading = true
          const columns = this.customTableHeaders.map((item) => item.column_name)
          getSearchProject(1, columns, this.formData.querys, this.currentPage, this.limit)
            .then((res) => {
              if (res.code === 200) {
                this.tableData = res.data.records
                this.total = res.data.total
              }
              this.tableDataLoading = false
            })
            .catch(() => {
              this.tableDataLoading = false
            })
        } else {
          return false
        }
      })
    },

    // 导出Excel
    handleExportExcel() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.exportLoading = true
          import('@/utils/Export2Excel').then((excel) => {
            // 拉取全部数据

            const columns = this.customTableHeaders.map((item) => item.column_name)
            getSearchProject(1, columns, this.formData.querys, 1, 10000)
              .then((res) => {
                if (res.code === 200) {
                  const tHeader = this.customTableHeaders.map((item) => item.column_full_name)
                  const filterVal = columns

                  const data = this.formatJson(filterVal, res.data.records)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '用户数据',
                  })
                  this.exportLoading = false
                } else {
                  this.exportLoading = false
                }
              })
              .catch(() => {
                this.exportLoading = false
              })
          })
        } else {
          return false
        }
      })
    },
    // 导出Excel格式化JSON
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]))
    },
  },
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
  width: 100%;
}
.btn-add {
  width: 100%;
  border-style: dashed;
}

.btn-delete {
  min-height: 22px;
  padding: 0 4px;
  margin-left: 10px;
}
</style>