基于element-ui封装一个Table模板组件

时间  2021-02-28
标签 javascript html vue java element-ui 数组 app this spa 栏目 软件设计 繁體版
原文   原文链接

你们在作后台管理系统的时候，写的最多的可能就是表格页面了，通常分三部分：搜索功能区、表格内容区和分页器区。通常这些功能都是使用第三方组件库实现，好比说element-ui，或者vuetify。这两个组件库都各有各的优势，但就table组件来讲，我仍是比较喜欢vuetify的实现，不用手写一个个column，只要传入headers的配置数组就行，甚至分页器都内置在了table组件里，用起来十分方便。有兴趣能够看看：vuetify data table。javascript

经典table组件

上面是一个经典的用element-ui开发的table页面，并且实际工做中若是每一个table页面都写一遍，重复代码太多了，因此不妨写一个table模板组件，减小重复代码。个人思路是这样的：html

  1. 搜索功能区：vue

    提供searchBar插槽，能够自定义搜索输入框，搜索、重置按钮必有，新增按钮经过props控制显隐。这里对应的代码以下：java

    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. 表格内容区：element-ui

    经过传入headers自动生成columns，参数以下：数组

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

    可对应以下代码：app

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

    注意，只支持全局filter。ui

    若是你想自定义column，也提供tableColumn插槽，支持自定义column，能够以下配置：this

    {
    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，十分方便。spa

    实现代码以下：

    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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程