【随记】-【组件】element-plus 封装tableSearchr组件

后台页面中，表格的搜索项多了以后 ，我们会想到封装一个search组件出来 代码如下

<template >
    <div>
        <el-form ref="listQueryRef" :inline="true" :model="listQuery" :label-width="'90px'">
            <template v-for="qu in tableCol" :key="qu.value">
                <el-form-item v-if="qu.type == 'text'" :label="qu.label" :prop="[qu.value]">
                    <el-input v-model="listQuery[qu.value]" style="width:220px" :placeholder="`请输入${qu.label}`" />
                </el-form-item>
                <el-form-item v-if="qu.type == 'select'" :label="qu.label" :prop="[qu.value]">
                    <el-select v-model="listQuery[qu.value]" :placeholder="`请选择${qu.label}`">
                        <el-option v-for="sel in qu.options" :key="sel.id" :label="sel.name" :value="sel.id" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="qu.type == 'selectCas'" :label="qu.label" :prop="[qu.value]">
                    <el-cascader v-model="listQuery[qu.value]" :props="dataprops(qu.propsData)"  :placeholder="`请选择${qu.label}`" :options="qu.options">
                    </el-cascader>
                </el-form-item>
                <el-form-item v-if="qu.type == 'range'"
                    :rules="[{ type: 'array', validator: validatorRange, trigger: 'blur' },]" :label="qu.label"
                    :prop="[qu.value]">
                    <el-input-number v-model="listQuery[qu.value][0]" :placeholder="`最小`" :min="0" :max="100"
                        :controls="false" style="width:95px;margin-right: 10px;" /> ~
                    <el-input-number v-model="listQuery[qu.value][1]" :placeholder="`最大`" :min="0" :max="100"
                        :controls="false" style="width:95px;margin-left: 10px;" />
                </el-form-item>
            </template>
            <el-form-item label=" ">
                <div class="table-right-fun">
                    <el-button class="filter-item" type="primary" @click="reset()">重置</el-button>
                    <el-button class="filter-item" type="primary" @click="search()">搜索</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>

// 组件名
defineOptions({ name: 'listQuery' })
// 接参
const props = defineProps(['tableCol'])
// 事件
const emit = defineEmits(['getSearch'])
// 搜索参数
let listQuery = reactive({})
// 城市配置
const dataprops = (value = 'value')=>{
    return{value}
}
const validatorRange = (rule, value, cb) => {
    if (!value[0] || !value[1]) cb()
    if (value[0] > value[1]) cb(new Error('最小值要小于最大值'))
    cb()
}
// 在渲染之前就要拿到的数据
onBeforeMount(() => {
    addTabcol(props.tableCol)
})
// 将数据变为搜索项
const addTabcol = (list) => {
    list.forEach(item => {
        if (item.type == 'range') {
            listQuery[item.value] = []
        } else {
            listQuery[item.value] = ''
        }
    });
}
// 列表
const listQueryRef = ref()
const reset = () => listQueryRef.value.resetFields()

const search = () => emit('getSearch', listQuery)
</script>