vue3+element-plus+js 对列表查询/重置条件组件简单封装

最新推荐文章于 2025-04-24 15:50:12 发布

小方很无聊

最新推荐文章于 2025-04-24 15:50:12 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_72270036/article/details/131720430

版权

在写后台管理的时候会有很多列表，列表上面一般会有查询条件，对列表进行搜索查询，所以就想封装成为组件，就不需要每个页面写一堆的代码，直接循环出来进行遍历即可。

1.封装子组件searchForm组件

<template>
  <el-form :model="searchInfo">
    <el-row :gutter="10" style="margin: 10px 0;">
      <el-col :span="item.span || 6" v-for="item, i in searchData" :key="i">
        <el-form-item :label="item.label" :label-width="item.width || '80px'">
          <el-input v-if="item.type === 'input'" v-model="searchInfo[item.prop]"
            :placeholder="item.placeholder || '请输入'" />
          <el-select v-if="item.type === 'select'" v-model="searchInfo[item.prop]"
            :placeholder="item.placeholder || '请选择'">
            <el-option v-for="item2, i2 in item.options" :key="i2" :label="item2.label" :value="item2.value" />

          </el-select>
          <el-date-picker v-if="item.type === 'date'" type="date" :value-format="item.format || 'YYYY-MM-DD'"
            :placeholder="item.placeholder || '请选择日期'" v-model="searchInfo[item.prop]"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="btnInfo.span || 6">
        <el-row justify="end">
          <el-button :type="btnInfo.query || 'primary'" @click="onSubmit">查询</el-button>
          <el-button :type="btnInfo.reset || 'default'" @click="onSubmit('reset')">重置</el-button>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
const props = defineProps({
  //搜索信息
  searchInfo: {
    type: Object,
    default: {}
  },
  //表单数组
  searchData: {
    type: Array,
    default: []
  },
  //按钮信息
  btnInfo: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits(['submitEmits']);
const onSubmit = (data) => {
  if (data == 'reset') {
    emit('submitEmits', {});
  } else {
    emit('submitEmits', props.searchInfo);
  }

}
</script>

<style lang="scss" scoped></style>

一般搜索条件都是输入框、选择器、日期选择，如有其他筛选条件，往里面添加即可！搜索时发射一个自定义事件，把数据传给父组件调用即可

2.父组件进行使用

<template>
  <searchForm :searchData="searchData" :searchInfo="productionlineForm" @submitEmits="submitEmitsFn"></searchForm>
</template>

<script setup>

import searchForm from '@/components/searchForm/index.vue'

let productionlineForm = ref({
  lineName: '',
  lineCode: '',
  status: ''
})

const searchData = ref([
  {
    label: '产线名称',
    type: 'input',
    prop: 'lineName'
  },
  {
    label: '产线编号',
    type: 'input',
    prop: 'lineCode'
  },
  {
    label: '状态',
    type: 'select',
    prop: 'status',
    options: [
      {
        label: '正常',
        value: 0
      },
      {
        label: '停用',
        value: 1
      }
    ]
  }
])


const submitEmitsFn = (val) => {
  productionlineForm.value = val
  //调接口渲染数据
  //getLinePageFn()
}


</script>

<style lang="scss" scoped></style>