H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】基于element-ui封装一个Table模板组件

大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区、表格内容区和分页器区。一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify。这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便。有兴趣可以看看:vuetify data table

经典table组件

上面是一个经典的用element-ui开发的table页面,而且实际工作中如果每个table页面都写一遍,重复代码太多了,所以不妨写一个table模板组件,减少重复代码。我的思路是这样的:

  1. 搜索功能区:

    提供searchBar插槽,可以自定义搜索输入框,搜索、重置按钮必有,新增按钮通过props控制显隐。这里对应的代码如下:

    genSearchBar() {
        if (this.noSearchBar || !this.$scopedSlots.searchBar) return '';
        return (
            <el-form class="seatch-form" inline={true} label-width="100">
                {this.$scopedSlots.searchBar()}
                <el-button
                    class="filter-item"
                    icon="el-icon-search"
                    type="primary"
                    onClick={this.handleSearchBtnClick}
                >
                    查询
                </el-button>
                <el-button
                    class="filter-item"
                    icon="el-icon-refresh"
                    onClick={this.handleResetBtnClick}
                >
                    重置
                </el-button>
                <el-button
                    class="filter-item"
                    icon="el-icon-plus"
                    type="primary"
                    v-show={this.showAddBtn}
                    onClick={this.handleAddBtnClick}
                >
                    新增
                </el-button>
            </el-form>
        );
    }
    
  2. 表格内容区:

    通过传入headers自动生成columns,参数如下:

    {
        label: '性别',
        prop: 'sex',
        width: '180',
        filter: 'sexFilter'
    }

    可对应如下代码:

    <el-table-column
                     prop="sex"
                     label="性别"
                     width="180">
        <template slot-scope="scope">{{scope.row.sex | sexFilter}}</template>
    </el-table-column>

    注意,只支持全局filter

    如果你想自定义column,也提供tableColumn插槽,支持自定义column,可以如下配置:

    {
        prop: 'action'
    }
    <el-table-column
                     prop="action"
                     label="操作"
                     width="180">
        <template slot-scope="scope">
            <el-button>编辑</el-button>
            <el-button>删除</el-button>
        </template>
    </el-table-column>

    这样,就会按传入的prop匹配对应的column,十分方便。

    实现代码如下:

    genTableSlot(h) {
        let customeColumns = this.$scopedSlots.tableColumn
            ? this.$scopedSlots.tableColumn()
            : [];
        return this.headers.map((item) => {
            // 根据item.prop判断是否使用传入的插槽内容
            let foundItem = customeColumns.find(
                (ele) =>
                    ele.componentOptions &&
                    ele.componentOptions.propsData.prop === item.prop
            );
            return foundItem
                ? foundItem
                : h('el-table-column', {
                      props: {
                          ...item,
                      },
                      scopedSlots: {
                          default: (props) => {
                              // 根据传入的全局filter处理column数据
                              let filter = this.$options.filters[
                                  item.filter
                              ];
                              let itemValue = props.row[item.prop];
                              return h(
                                  'span',
                                  filter ? filter(itemValue) : itemValue
                              );
                          },
                      },
                  });
        });
    }
    genTable(h) {
        return h(
            'el-table',
            {
                ref: 'tableRef',
                props: {
                    ...this.$attrs,
                    data: this.data,
                },
                on: {
                    'selection-change': (val) => {
                        this.$emit('selection-change', val);
                    },
                },
            },
            [...this.genTableSlot(h)]
        );
    }
  3. 分页器区:

    如无特殊需求,分页器功能一致,所以直接内置。

    实现代码如下:

    genPagination() {
        return (
            <div class="pagination-wrap">
                <el-pagination
                    layout="total,prev,pager,next,jumper"
                    current-page={this.current}
                    page-size={this.pageSize}
                    total={this.total}
                    {...{
                        on: { 'current-change': this.handleCurrentChange },
                    }}
                ></el-pagination>
            </div>
        );
    }

    最后附完整代码和demo:

    <script>
    export default {
        name: 'TableTemplate',
        props: {
            data: {
                type: Array,
                default: () => [],
                required: true,
            },
            headers: {
                type: Array,
                default: () => [],
                required: true,
            },
            current: {
                type: Number,
                default: 1,
            },
            pageSize: {
                type: Number,
                default: 10,
            },
            total: {
                type: Number,
                default: 0,
            },
            noSearchBar: Boolean,
            showAddBtn: Boolean,
        },
        mounted() {
            this.$nextTick(() => {
                this.$emit('search');
            });
        },
        methods: {
            genSearchBar() {
                if (this.noSearchBar || !this.$scopedSlots.searchBar) return '';
                return (
                    <el-form class="seatch-form" inline={true} label-width="100">
                        {this.$scopedSlots.searchBar()}
                        <el-button
                            class="filter-item"
                            icon="el-icon-search"
                            type="primary"
                            onClick={this.handleSearchBtnClick}
                        >
                            查询
                        </el-button>
                        <el-button
                            class="filter-item"
                            icon="el-icon-refresh"
                            onClick={this.handleResetBtnClick}
                        >
                            重置
                        </el-button>
                        <el-button
                            class="filter-item"
                            icon="el-icon-plus"
                            type="primary"
                            v-show={this.showAddBtn}
                            onClick={this.handleAddBtnClick}
                        >
                            新增
                        </el-button>
                    </el-form>
                );
            },
            genTableSlot(h) {
                let customeColumns = this.$scopedSlots.tableColumn
                    ? this.$scopedSlots.tableColumn()
                    : [];
                return this.headers.map((item) => {
                    // 根据item.prop判断是否使用传入的插槽内容
                    let foundItem = customeColumns.find(
                        (ele) =>
                            ele.componentOptions &&
                            ele.componentOptions.propsData.prop === item.prop
                    );
                    return foundItem
                        ? foundItem
                        : h('el-table-column', {
                              props: {
                                  ...item,
                              },
                              scopedSlots: {
                                  default: (props) => {
                                      let filter = this.$options.filters[
                                          item.filter
                                      ];
                                      let itemValue = props.row[item.prop];
                                      return h(
                                          'span',
                                          filter ? filter(itemValue) : itemValue
                                      );
                                  },
                              },
                          });
                });
            },
            genTable(h) {
                return h(
                    'el-table',
                    {
                        ref: 'tableRef',
                        props: {
                            ...this.$attrs,
                            data: this.data,
                        },
                        on: {
                            'selection-change': (val) => {
                                this.$emit('selection-change', val);
                            },
                        },
                    },
                    [...this.genTableSlot(h)]
                );
            },
            genPagination() {
                return (
                    <div class="pagination-wrap">
                        <el-pagination
                            layout="total,prev,pager,next,jumper"
                            current-page={this.current}
                            page-size={this.pageSize}
                            total={this.total}
                            {...{
                                on: { 'current-change': this.handleCurrentChange },
                            }}
                        ></el-pagination>
                    </div>
                );
            },
            resetPagination() {
                this.$emit('update:current', 1);
            },
            handleCurrentChange(val) {
                this.$emit('update:current', val);
                this.$emit('search');
            },
            handleSearchBtnClick() {
                this.$emit('search');
            },
            handleResetBtnClick() {
                this.resetPagination();
                this.$emit('reset');
            },
            handleAddBtnClick() {
                this.$emit('add');
            },
            getTableRef() {
                return this.$refs.tableRef;
            },
        },
        render(h) {
            return (
                <div>
                    {this.genSearchBar()}
                    {this.genTable(h)}
                    {this.genPagination()}
                </div>
            );
        },
    };
    </script>
    
    <style scoped>
    .seatch-form {
        text-align: left;
    }
    .pagination-wrap {
        margin-top: 20px;
        text-align: right;
    }
    </style>
    

    Demo:

    <template>
        <div>
            <table-template
                border
                :headers="headers"
                :data="tableData"
                :current.sync="current"
                :total="total"
                ref="tableTemplate"
                showAddBtn
                @search="handleSearch"
                @reset="handleReset"
                @add="handleAdd"
                @selection-change="handleSelectionChange"
            >
                <template #searchBar>
                    <el-form-item label="姓名:" prop="title">
                        <el-input class="filter-item" v-model="searchForm.title" ></el-input>
                    </el-form-item>
                </template>
                <template #tableColumn>
                    <el-table-column
                        prop="selection"
                        type="selection"
                        width="55"
                    ></el-table-column>
                    <el-table-column prop="test" label="姓名" width="180">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>姓名:{{ scope.row.name }}</p>
                                <p>住址:{{ scope.row.address }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{scope.row.name}}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                </template>
            </table-template>
        </div>
    </template>
    
    <script>
    import TableTemplate from './TableTemplate';
    export default {
        name: 'Demo',
        components: {
            TableTemplate,
        },
        data() {
            return {
                current: 1,
                total: 100,
                headers: [
                    {
                        prop: 'selection',
                    },
                    {
                        label: '姓名',
                        prop: 'name',
                        width: '100',
                    },
                    {
                        label: '年龄',
                        prop: 'year',
                    },
                    {
                        label: '性别',
                        prop: 'sex',
                        width: 'sexFilter',
                    },
                    {
                        prop: 'test',
                    },
                ],
                tableData: [
                    {
                        name: 'curry',
                        year: 18,
                        sex: 'female',
                        address: '天安门',
                    },
                ],
                searchForm: {
                    title: '',
                },
            };
        },
        methods: {
            handleSearch() {
                console.log(this.current);
            },
            handleReset() {
                this.searchForm = {
                    title: '',
                };
            },
            handleAdd() {
                console.log('添加');
            },
            handleSelectionChange(val) {
                console.log(val);
            },
            getTableRef() {
                console.log(this.$refs.tableTemplate.getTableRef());
            },
        },
    };
    </script>
    

本文地址:H5W3 » 【前端技术】基于element-ui封装一个Table模板组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址