一、介绍
项目中在有表格的地方,自然是少不了增删改查的操作,我们这里来封装一个查询的组件
表格封装请移步至 el-table表格二次封装
二、组件功能
1、根据关键字查询
2、根据时间范围查询
3、根据表格某条数据状态查询
三、准备工作
在 components 下创建 LQuery.vue 文件
接下来是我们的页面
分别需要一个 index.vue 和 table.ts 文件
四、LQuery.vue 完整代码
根据自己需求把 LQuery.vue 该组件注册为全局组件或者使用时单独引入
<template>
<div class="l-query">
<div class="query-head">
<div style="display: flex; align-items: center;">
<el-form :model="props.queryModule.queryForm" label-width="70px" style="display: flex;">
<el-form-item :label="item.label" style="margin-right: 20px; margin-bottom: 0px;"
v-for="item in props.queryModule.query.slice(0, 2)" :key="item.prop"> <!-- 这里只获取前两个筛选条件 -->
<el-input v-model="props.queryModule.queryForm[item.prop]" :placeholder="'输入' + item.label + '关键字'"
clearable v-if="item.type == 'text'"></el-input>
<el-select-v2 v-model="props.queryModule.queryForm[item.prop]" :options="item.options" clearable
:placeholder="'选择' + item.label + '关键字'" v-else-if="item.type == 'select'" />
<el-date-picker v-model="props.queryModule.queryForm[item.prop]" clearable type="datetimerange"
format="YYYY/MM/DD hh:mm:ss" value-format="x" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" v-else-if="item.type == 'date'" />
</el-form-item>
</el-form>
<el-button @click="isOpen = !isOpen" v-if="!isOpen" :disabled="props.queryModule.query.length == 2"
:icon="ArrowDownBold" circle></el-button>
<el-button @click="isOpen = !isOpen" v-else :icon="ArrowUpBold" circle></el-button>
<el-button @click="props.queryModule.Search" type="primary" plain>查询</el-button>
<el-button @click="props.queryModule.Recover">重置</el-button>
</div>
<div>
<slot name="event"></slot>
</div>
</div>
<!-- 这里做的是一个类似于折叠面板的功能 -->
<div class="query-content" :class="isOpen ? 'is-open' : ''"> <el-form :model="props.queryModule.queryForm"
label-width="70px" style="display: flex; flex-wrap: wrap;">
<el-form-item :label="item.label" style="margin-right: 20px; margin-bottom: 0px;"
v-for="item in props.queryModule.query.slice(2)" :key="item.prop"> <!-- 这里获取除前两个以外所有的筛选条件 -->
<el-input v-model="props.queryModule.queryForm[item.prop]" :placeholder="'输入' + item.label + '关键字'"
clearable v-if="item.type == 'text'"></el-input>
<el-select-v2 v-model="props.queryModule.queryForm[item.prop]" :options="item.options" clearable
:placeholder="'选择' + item.label + '关键字'" v-else-if="item.type == 'select'" />
<el-date-picker v-model="props.queryModule.queryForm[item.prop]" clearable type="datetimerange"
format="YYYY/MM/DD hh:mm:ss" value-format="x" range-separator="至" start-placeholder="开始时间"
end-placeholder="结束时间" v-else-if="item.type == 'date'" />
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import {
reactive, toRefs, ref, onMounted, defineProps } from 'vue'
import {
ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
const props = defineProps({
queryModule: Object
})
const state = reactive({
isOpen: false,
})
const {
isOpen } = toRefs(state)
onMounted(() => {
})
</script>
<style scoped lang="scss">
.l-query {
margin-bottom: 10px;
overflow: hidden;
.query-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.query-content {
width: 100%;
max-height: 0px;
transition: all 0.8s;
}
.is-open {
padding: 10px 0;
max-height: 200px;
}
}
::v-deep(.el-form-item__label) {
font-weight: bold;
}
.el-input {
width: 200px;
}
.el-select-v2 {
width: 200px;
}
::v-deep(.el-date-editor) {
width: 380px !important;
}
</style>
index.vue 完整代码
<template>
<div class="role">
<LQuery :queryModule="queryModule">
<template #event>
<el-button type="primary" @click="roleAdd">新增</el-button>
<el-button type="danger" @click="roleDel">删除</el-button>
</template>
</LQuery>
</div>
</template>
<script setup lang="ts">
import {
reactive, toRefs, ref, onMounted } from 'vue'
import {
queryData } from './table'
const state = reactive({
query: queryData,
queryForm: {
},
})
const {
query, queryForm } = toRefs(state)
onMounted(() => {
getDataList()
})
function getDataList() {
}
function roleAdd() {
}
function roleDel() {
}
// 查询、表单操作相关
const queryModule = ref<Object>({
queryForm: queryForm,
query: query,
Search: Search,
Recover: Recover
})
function Search() {
console.log(state.queryForm) // 搜索的字段
getDataList()
}
function Recover() {
state.queryForm = {
}
getDataList()
}
</script>
<style scoped lang="scss"></style>
table.ts 完整代码
talbe.ts文件介绍
该文件是控制我们表格的列展示的
const queryData: any = [
{
label: "姓名", prop: 'username', type: 'text' },
{
label: "性别", prop: 'age', type: 'select', options: [{
value: '1', label: '男' }, {
value: '2', label: '女' }] },
{
label: "创建时间", prop: 'dateTime', type: 'date' },
]
export {
queryData
}
效果图