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

基于element-ui封装一个Table模板组件的更多相关文章

  1. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  2. 封装Vue Element的可编辑table表格组件

    前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. 基于ionic框架封装一个图片轮播指令的几点

    在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...

  5. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  6. vue封装一个弹框组件

    这是一个提示框和对话框,例:   这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> &l ...

  7. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  8. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  9. element ui 里面的table怎么弹出一个框让表中数据点击出现弹框

    <el-table-column label="团队" prop="name" min-width="120px" align=&qu ...

随机推荐

  1. 记angular和asp.net使用grpc进行通信

    AspNetCore配置grpc服务端 新建一个Demo项目: GrpcStartup, 目录结构如下图: GrpcStartup.GrpcServices需要安装下面的依赖 <PackageR ...

  2. hdu 1166 敌兵布阵 线段树区间修改、查询、单点修改 板子题

    题目链接:敌兵布阵 题目: C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视 ...

  3. hdu 6827 Road To The 3rd Building

    题意: t组输入,每一组一个n,然后后面是n个树的值(我们放到数组v里面),你需要从[1,n]这个区间内挑选出来两个数i,j,你需要保证i<=j,之后你要求一下v[i]+v[i+1]+...+v ...

  4. hutool学习总结

    1. 为什么要学习Hutool的使用 Hutool官网 中文写的已经很清楚了 Hutool是一款强力的工具类.封装了工作开发中一些常见的功能操作.避免重复造轮子,使用它大大提高的开发效率. 2. Hu ...

  5. JVM 报 GC Overhead limit exceeded 是什么意思?

    默认情况下,并不是等堆内存耗尽,才会报 OutOfMemoryError,而是如果 JVM 觉得 GC 效率不高,也会报这个错误. 那么怎么评价 GC 效率不高呢?来看下源码: 呢?来看下源码gcOv ...

  6. 在Python里,用股票案例讲描述性统计分析方法(内容来自我的书)

    描述性统计是数学统计分析里的一种方法,通过这种统计方法,能分析出数据整体状况以及数据间的关联.在这部分里,将用股票数据为样本,以matplotlib类为可视化工具,讲述描述性统计里常用指标的计算方法和 ...

  7. 探究为什么FreeRTOS 有些API不能在中断服务函数中调用,转而需要调用带ISR的版本

    用了好久的FreeRTOS以前只是知道,如果在中断服务程序中调用某一些FreeRTOS的API函数时需要注意,如果有ISR版本的一定要调用末尾带ISR的函数,并且中断服务程序要调用freeRTOS的A ...

  8. Mac 开机时为什么突然响一下,duang

    Mac 开机时为什么突然响一下,duang duang 一下 https://zh.wikipedia.org/wiki/Duang refs xgqfrms 2012-2020 www.cnblog ...

  9. GitHub Secrets All In One

    GitHub Secrets All In One https://docs.github.com/en/free-pro-team@latest/actions/reference/encrypte ...

  10. BB link

    1 1 1 BB link: 1 1 demo: code: result: 1 1 1 1 1 1 1