[JavaScript知识库]element input+table实现一个双向绑定分页筛选组件

<template>
    <div>
        <el-input v-model="searchKey" 
                @input="changeNative" 
                @focus="isDisplay = true"
                @blur="blur"
                clearable
                />
        <el-card 
            v-show="isDisplay"
            class="my-table" 
            v-loading="loading" 
            element-loading-text="拼命加载中">
            <el-table :data="tableData" @row-click="rowClick" style="width: 100%" :show-header="isShowHeader">
                <el-table-column v-for="item in theadTitles" :key="item.key" :prop="item.key" :label="item.label" :width="item.width" />
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNation.currentPage"
                :page-size="pageNation.size"
                layout="prev, pager, next, jumper"
                :total="pageNation.total" />
        </el-card>
    </div>
</template>

<script>
const debounce = (fn, wait = 300) => {
    let timeout;
    return function () {
        const context = this;
        const args = [...arguments];
        if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
            fn.apply(context, args);
        }, wait);
    };
};
export default {
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        value: String,
        isShowHeader: {
            type: Boolean,
            default: false
        },
        url: {
            type: Function,
            required: true
        },
        queryParams: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            isDisplay: false,
            loading: false,
            searchKey: this.value,
            theadTitles: [
                {key: 'deptCode', label: '网点编码', width: 120}, 
                {key: 'deptName', label: '网点名称', }
            ],
            tableData: [],
            pageNation: {
                currentPage: 1,
                size: 5,
                total: 0
            }
        }
    },
    methods: {
        changeNative: debounce(function(e) {
            this.$emit('input', this.searchKey);
            this.pageNation.currentPage = 1;
            setTimeout(() => {
                this.getTableData();
            }, 0);
        }, 300),
        handleCurrentChange(val) {
            this.pageNation.currentPage = val;
            this.getTableData();
        },
        blur(e) {
            let dom = document.querySelector('.my-table');
            window.addEventListener('click', (evt) => {
                let tagName = evt.target.tagName;
                let isContain = dom.contains(evt.target);
                // 聚焦的时候也会执行click, 因此需要排除点击input的时候
                // 确保点击dom不在表格上的时候才会执行blur
                if (!isContain && tagName !== 'INPUT') {
                    // blur与click 不可兼得，如果是同步则只会执行blur而不会执行click
                    setTimeout(() => {
                        this.isDisplay = false;
                    }, 200);
                }
            });
        },
        rowClick(row) {
            this.$emit('input', row.deptName);
            this.searchKey = row.deptName;
            this.isDisplay = false;
        },
        getTableData() {
            try {
                this.loading = true;
                const API = this.url;
                API({
                    ...this.queryParams,
                    current: this.pageNation.currentPage,
                    size: this.pageNation.size
                }).then(res => {
                    const { data } = res;
                    this.tableData = data.records || [];
                    this.pageNation.total = data.totalRecord;
                    this.loading = false;
                });
            } catch(e) {
                this.loading = false;
                console.log('e', e);
            }
        }
    },
    mounted() {
        this.getTableData();
    },
    watch: {
        queryParams: {
            immediate: true,
            handler: function(v) {}
        }
    }
}
</script>

<style lang="scss" scoped>
.my-table {
    background: #FFF;
    position: absolute;
    z-index: 10;
    /deep/.el-card__body {
        padding: 4px;
    }
}
</style>

父组件使用方式：

<blur-search v-model="form.orgName" :url="$api.statistics.queryDeptNames" :queryParams="queryParams" />

// url 为接口api, queryParams为查询参数
    computed: {
        queryParams() {
            return {
                deptName: this.form.orgName
            }
        }
    },