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 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
微信小程序实现图片压缩功能
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查询域名状态whois的类
2006/11/25 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
详解python中的文件与目录操作
2017/07/11 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
生产内勤岗位职责
2013/12/07 职场文书
给交警的表扬信
2014/01/12 职场文书
法制宣传月活动总结
2014/04/29 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
教师师德师风整改措施
2014/10/24 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python