更多筛选对话框more-select-dialog

1.主表格增删改查：查询表单

2.更多筛选查询对话框：查询表单

这二者的数据和逻辑问题

table.vue

<template>
  <div class="up-down-table-container">
    <div class="up-table-container">
      <div class="search-form-wrapper">
        <div class="title">title</div>
        <div class="seach_list">
          <el-button style="margin-right:10px" type='primary' :plain='true' @click="moreSelect">更多筛选</el-button>
        </div>
      </div>
    <moreSelectDialog ref="moreSelectDialog" @searchMoreTable="searchMoreTable"></moreSelectDialog>
  </div>
</template>
<script>
export default {
  components: {
    moreSelectDialog: () => import('../components/moreSelectDialog.vue'),
  },
  data() {
    return {
      searchForm: {},
      moreSelectForm: {},
    }
  },
  mounted() {
  },
  methods: {
    //更多筛选
    moreSelect() {
      this.$refs.moreSelectDialog.open(this.moreSelectForm,'0')
    },
    //接收更多筛选对话框传回来的搜索值
    searchMoreTable(form) {
      this.moreSelectForm = { ...form }
      this.searchForm = { ...this.searchForm, ...form }
      this.searchUpTable();
    },
  }
}
</script>

more-select-dialog.vue

<template>
  <el-dialog title="更多筛选" :visible.sync="dialogVisible" width="40%" :close-on-click-modal='false'>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item v-if="type == 0" label="状态:">
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetClick">重置</el-button>
      <el-button type="primary" @click="submitClick">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {},
    }
  },
  methods: {
    // 打开对话框
    open(obj) {
      this.dialogVisible = true
      this.form = { ...obj }
    },
    // 关闭对话框
    close() {
      this.dialogVisible = false
    },
    // 重置按钮
    resetClick() {
      this.resetValue(this.form)
    },
    // 确定按钮
    submitClick() {
      this.$emit('searchMoreTable', this.form)
      this.dialogVisible = false
    },
    //重置条件
    returnNormalValue(value) {
      if (typeof value === 'string') {
        return ''
      }
      if (typeof value === 'number') {
        return 0
      }
      let toStrong = Object.prototype.toString
      let type = toStrong.call(value)
      if (type.includes('Date')) {
        return new Date()
      }
      if (type.includes('Object')) {
        return {}
      }
      if (type.includes('Array')) {
        return []
      }
    },
    //重置条件
    resetValue(data) {
      let searchForm = data
      for (const key in searchForm) {
        if (Object.hasOwnProperty.call(searchForm, key)) {
          searchForm[key] = this.returnNormalValue(searchForm[key])
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #303133;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

:deep(.el-select){
  width: 100%;
}
</style>