Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能


Posted in Javascript onJanuary 26, 2018

2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5。结合公司的一些实际项目,也封装了一些比较实用的组件。

由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不??拢?苯由洗?搿?/p>

2、实现思路

2.1、Element UI 引入(整体引入)

main.js

// Element UI
import Element from 'element-ui'
// 默认样式
import 'element-ui/lib/theme-chalk/index.css'

2.2、开始封装 iTable.vue 组件 (骨架)

由于公司项目都是以 i 开头,所以,为了区分组件和页面,习惯于组件命名也以 i 开头。 首先把 Table 、 Pagination 组件加进来

<template>
 <div class="table">
  <!--region 表格-->
  <el-table id="iTable"></el-table>
  <!--endregion-->
  <!--region 分页-->
  <el-pagination></el-pagination>
  <!--endregion-->
 </div>
<template>

养成写注释的好习惯,个人项目的注释量基本上不会低于 30%

2.3、在页面中引用 iTable 组件,并且给 iTable 组件传值

<template>
 <div class="table-page">
 <i-table :list="list" 
    :total="total" 
    :otherHeight="otherHeight"
    @handleSizeChange="handleSizeChange"
    @handleIndexChange="handleIndexChange" @handleSelectionChange="handleSelectionChange"
    :options="options"
    :columns="columns"
    :operates="operates"
    @handleFilter="handleFilter"
    @handelAction="handelAction">
 </i-table>
 </div>
</template>
<script>
 import iTable from '../../components/Table/Index'
 export default {
  components: {iTable},
  data () {
   return {
    total: 0, // table数据总条数
    list: [], // table数据
    otherHeight: 208, // 除了table表格之外的高度,为了做table表格的高度自适应
    page: 1, // 当前页码
    limit: 20, // 每页数量
    options: {
     stripe: true, // 是否为斑马纹 table
     loading: false, // 是否添加表格loading加载动画
     highlightCurrentRow: true, // 是否支持当前行高亮显示
     mutiSelect: true, // 是否支持列表项选中功能
     filter: false, // 是否支持数据过滤功能
     action: false // 是否支持 表格操作功能
    }, // table 的参数
    columns: [
     {
      prop: 'id',
      label: '编号',
      align: 'center',
      width: 60
     },
     {
      prop: 'title',
      label: '标题',
      align: 'center',
      width: 400,
      formatter: (row, column, cellValue) => {
       return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`
      }
     },
     {
      prop: 'state',
      label: '状态',
      align: 'center',
      width: '160',
      render: (h, params) => {
       return h('el-tag', {
       props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 组件的props
       }, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '审核中')
      }
     },
     ……
    ], // 需要展示的列
    operates: {
     width: 200,
     fixed: 'right',
     list: [
      {
       label: '编辑',
       type: 'warning',
       show: true,
       icon: 'el-icon-edit',
       plain: true,
       disabled: true,
       method: (index, row) => {
        this.handleEdit(index, row)
       }
      },
      {
       label: '删除',
       type: 'danger',
       icon: 'el-icon-delete',
       show: true,
       plain: false,
       disabled: false,
       method: (index, row) => {
        this.handleDel(index, row)
       }
      }
     ]
    } // 列操作按钮
   }
  },
  methods: {
    // 切换每页显示的数量
   handleSizeChange (size) {
    this.limit = size
    console.log(' this.limit:', this.limit)
   },
   // 切换页码
   handleIndexChange (index) {
    this.page = index
    console.log(' this.page:', this.page)
   },
   // 选中行
   handleSelectionChange (val) {
    console.log('val:', val)
   },
   // 编辑
   handleEdit (index, row) {
    console.log(' index:', index)
    console.log(' row:', row)
   },
   // 删除
   handleDel (index, row) {
    console.log(' index:', index)
    console.log(' row:', row)
   }
  }
 }
</script>

除了 columns 参数和 operates 参数 之外,其它的参数应该还好理解,好的。那我们就详细的解释下这两个参数,那么我们就需要结合组件iTable.vue 来讲解了,接下来就给 iTable.vue 添加肌肉和血管,代码都贴了。 比较难理解的就是columns里面的 render 参数,使用了Vue的虚拟标签,为了就是能够在 table 表格的列中随心所欲的使用各种html标签 和 element UI 的其他组件。( 你也可以直接写,看看 table 组件是否能识别,呵呵哒! )这个估计对于刚入门的小伙伴是一个比较难理解的地方,详细的大家可以先看下vue 的render,解释的更清楚,如果有的小伙伴不理解,可以直接私信我~~~

<!--region 封装的分页 table-->
<template>
 <div class="table">
 <el-table id="iTable" v-loading.iTable="options.loading" :data="list" :max-height="height" :stripe="options.stripe"
    ref="mutipleTable"
    @selection-change="handleSelectionChange">
  <!--region 选择框-->
  <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
  </el-table-column>
  <!--endregion-->
  <!--region 数据列-->
  <template v-for="(column, index) in columns">
  <el-table-column :prop="column.prop"
       :label="column.label"
       :align="column.align"
       :width="column.width">
   <template slot-scope="scope">
   <template v-if="!column.render">
    <template v-if="column.formatter">
    <span v-html="column.formatter(scope.row, column)"></span>
    </template>
    <template v-else>
    <span>{{scope.row[column.prop]}}</span>
    </template>
   </template>
   <template v-else>
    <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
   </template>
   </template>
  </el-table-column>
  </template>
  <!--endregion-->
  <!--region 按钮操作组-->
  <el-table-column ref="fixedColumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed"
      v-if="operates.list.filter(_x=>_x.show === true).length > 0">
  <template slot-scope="scope">
   <div class="operate-group">
   <template v-for="(btn, key) in operates.list">
    <div class="item" v-if="btn.show">
    <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
       :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
    </el-button>
    </div>
   </template>
   </div>
  </template>
  </el-table-column>
  <!--endregion-->
 </el-table>
 <div style="height:12px"></div>
 <!--region 分页-->
 <el-pagination @size-change="handleSizeChange"
     @current-change="handleIndexChange"
     :page-size="pageSize"
     :page-sizes="[10, 20, 50]" :current-page="pageIndex" layout="total,sizes, prev, pager, next,jumper"
     :total="total"></el-pagination>
 <!--endregion-->
 <!--region 数据筛选-->
 <div class="filter-data fix-right" v-show="options.filter" @click="showfilterDataDialog">
  <span>筛选过滤</span>
 </div>
 <!--endregion-->
 <!--region 表格操作-->
 <div class="table-action fix-right" v-show="options.action" @click="showActionTableDialog">
  <span>表格操作</span>
 </div>
 <!--endregion-->
 </div>
</template>
<!--endregion-->
<script>
 export default {
 props: {
  list: {
  type: Array,
  default: []
  }, // 数据列表
  columns: {
  type: Array,
  default: []
  }, // 需要展示的列 === prop:列数据对应的属性,label:列名,align:对齐方式,width:列宽
  operates: {
  type: Array,
  default: []
  }, // 操作按钮组 === label: 文本,type :类型(primary / success / warning / danger / info / text),show:是否显示,icon:按钮图标,plain:是否朴素按钮,disabled:是否禁用,method:回调方法
  total: {
  type: Number,
  default: 0
  }, // 总数
  pageSize: {
  type: Number,
  default: 20
  }, // 每页显示的数量
  otherHeight: {
  type: Number,
  default: 160
  }, // 用来计算表格的高度
  options: {
  type: Object,
  default: {
   stripe: false, // 是否为斑马纹 table
   highlightCurrentRow: false // 是否要高亮当前行
  },
  filter: false,
  action: false
  } // table 表格的控制参数
 },
 components: {
  expandDom: {
  functional: true,
  props: {
   row: Object,
   render: Function,
   index: Number,
   column: {
   type: Object,
   default: null
   }
  },
  render: (h, ctx) => {
   const params = {
   row: ctx.props.row,
   index: ctx.props.index
   }
   if (ctx.props.column) params.column = ctx.props.column
   return ctx.props.render(h, params)
  }
  }
 },
 data () {
  return {
  pageIndex: 1,
  multipleSelection: [] // 多行选中
  }
 },
 mounted () {
 },
 computed: {
  height () {
  return this.$utils.Common.getWidthHeight().height - this.otherHeight
  }
 },
 methods: {
  // 切换每页显示的数量
  handleSizeChange (size) {
  this.$emit('handleSizeChange', size)
  this.pageIndex = 1
  },
  // 切换页码
  handleIndexChange (index) {
  this.$emit('handleIndexChange', index)
  this.pageIndex = index
  },
  // 多行选中
  handleSelectionChange (val) {
  this.multipleSelection = val
  this.$emit('handleSelectionChange', val)
  },
  // 显示 筛选弹窗
  showfilterDataDialog () {
  this.$emit('handleFilter')
  },
  // 显示 表格操作弹窗
  showActionTableDialog () {
  this.$emit('handelAction')
  }
 }
 }
</script>
<style lang="less" rel="stylesheet/less">
 @import "../../assets/styles/mixins";
 .table {
 height: 100%;
 .el-pagination {
  float: right;
  margin: 20px;
 }
 .el-table__header-wrapper, .el-table__fixed-header-wrapper {
  thead {
  tr {
   th {
   color: #333333;
   }
  }
  }
 }
 .el-table-column--selection .cell {
  padding: 0;
  text-align: center;
 }
 .el-table__fixed-right {
  bottom: 0 !important;
  right: 6px !important;
  z-index: 1004;
 }
 .operate-group {
  display: flex;
  flex-wrap: wrap;
  .item {
  margin-top: 4px;
  margin-bottom: 4px;
  display: block;
  flex: 0 0 50%;
  }
 }
 .filter-data {
  top: e("calc((100% - 100px) / 3)");
  background-color: rgba(0, 0, 0, 0.7);
 }
 .table-action {
  top: e("calc((100% - 100px) / 2)");
  background-color: rgba(0, 0, 0, 0.7);
 }
 .fix-right {
  position: absolute;
  right: 0;
  height: 100px;
  color: #ffffff;
  width: 30px;
  display: block;
  z-index: 1005;
  writing-mode: vertical-rl;
  text-align: center;
  line-height: 28px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  cursor: pointer;
 }
 }
</style>

总结

以上所述是小编给大家介绍的Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS替换文本域内的回车示例
Feb 18 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
JS简单随机数生成方法
Sep 05 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
浅析Ajax语法
Dec 05 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
微信小程序实现图片压缩功能
Jan 26 #Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
利用js给datalist或select动态添加option选项的方法
Jan 25 #Javascript
基于vue.js无缝滚动效果
Jan 25 #Javascript
You might like
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
PHP中CheckBox多选框上传失败的代码写法
2017/02/13 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Python中的下划线详解
2015/06/24 Python
20招让你的Python飞起来!
2016/09/27 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
高中生操行评语
2014/04/25 职场文书
单位绩效考核方案
2014/05/11 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
运动会报道稿300字
2014/10/02 职场文书
担保书范本
2015/01/20 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
Python实现拼音转换
2021/06/07 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python