Vue2.5與Element UI的元件分頁功能實現

這次帶給大家Vue2.5與Element UI的元件分頁功能實現，Vue2.5與Element UI的元件分頁功能實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

2017年底了，總結了這一年多來的前端之路，Vue從入門到放棄，再二進宮，從 Vue1.0 持續跟踪到 Vue2.5。結合公司的一些實際項目，也封裝了一些比較實用的組件。

由於現在公司管理平台主要運用Element UI，索性就結合元件Table 和 Pagination 封裝了一個支援頁面切換的Table元件，不囉嗦，直接上程式碼。

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>
 <p>
  <!--region 表格-->
  <el-table></el-table>
  <!--endregion-->
  <!--region 分页-->
  <el-pagination></el-pagination>
  <!--endregion-->
 </p>
<template></template></template>

養成寫註解的好習慣，個人項目的註解量基本上不會低於30%

2.3、在頁面中引用iTable 元件，並且給iTable 元件傳值

<template>
 <p>
 <i-table>
 </i-table>
 </p>
</template>
<script>
 import iTable from &#39;../../components/Table/Index&#39;
 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: &#39;id&#39;,
      label: &#39;编号&#39;,
      align: &#39;center&#39;,
      width: 60
     },
     {
      prop: &#39;title&#39;,
      label: &#39;标题&#39;,
      align: &#39;center&#39;,
      width: 400,
      formatter: (row, column, cellValue) => {
       return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}`
      }
     },
     {
      prop: &#39;state&#39;,
      label: &#39;状态&#39;,
      align: &#39;center&#39;,
      width: &#39;160&#39;,
      render: (h, params) => {
       return h(&#39;el-tag&#39;, {
       props: {type: params.row.state === 0 ? &#39;success&#39; : params.row.state === 1 ? &#39;info&#39; : &#39;danger&#39;} // 组件的props
       }, params.row.state === 0 ? &#39;上架&#39; : params.row.state === 1 ? &#39;下架&#39; : &#39;审核中&#39;)
      }
     },
     ……
    ], // 需要展示的列
    operates: {
     width: 200,
     fixed: &#39;right&#39;,
     list: [
      {
       label: &#39;编辑&#39;,
       type: &#39;warning&#39;,
       show: true,
       icon: &#39;el-icon-edit&#39;,
       plain: true,
       disabled: true,
       method: (index, row) => {
        this.handleEdit(index, row)
       }
      },
      {
       label: &#39;删除&#39;,
       type: &#39;danger&#39;,
       icon: &#39;el-icon-delete&#39;,
       show: true,
       plain: false,
       disabled: false,
       method: (index, row) => {
        this.handleDel(index, row)
       }
      }
     ]
    } // 列操作按钮
   }
  },
  methods: {
    // 切换每页显示的数量
   handleSizeChange (size) {
    this.limit = size
    console.log(&#39; this.limit:&#39;, this.limit)
   },
   // 切换页码
   handleIndexChange (index) {
    this.page = index
    console.log(&#39; this.page:&#39;, this.page)
   },
   // 选中行
   handleSelectionChange (val) {
    console.log(&#39;val:&#39;, val)
   },
   // 编辑
   handleEdit (index, row) {
    console.log(&#39; index:&#39;, index)
    console.log(&#39; row:&#39;, row)
   },
   // 删除
   handleDel (index, row) {
    console.log(&#39; index:&#39;, index)
    console.log(&#39; row:&#39;, row)
   }
  }
 }
</script>

除了columns 參數和operates 參數之外，其它的參數應該還好理解，好的。那我們就詳細的解釋下這兩個參數，那我們就需要結合組件iTable.vue 來講解了，接下來就為 iTable.vue 加入肌肉和血管，程式碼都貼了。 比較難理解的就是columns裡面的 render 參數，使用了Vue的虛擬標籤，為了就是能夠在 table 表格的欄位中隨心所欲的使用各種html標籤 和 element UI 的其他元件。 （ 你也可以直接寫，看看table 組件是否能識別，呵呵噠！ ）這個估計對於剛入門的小伙伴是一個比較難理解的地方,詳細的大家可以先看下vue 的render，解釋的更清楚,如果有的小夥伴不理解，可以直接私訊我~~~

<!--region 封装的分页 table-->
<template>
 <p>
 <el-table>
  <!--region 选择框-->
  <el-table-column>
  </el-table-column>
  <!--endregion-->
  <!--region 数据列-->
  <template>
  <el-table-column>
   <template>
   <template>
    <template>
    <span></span>
    </template>
    <template>
    <span>{{scope.row[column.prop]}}</span>
    </template>
   </template>
   <template>
    <expand-dom></expand-dom>
   </template>
   </template>
  </el-table-column>
  </template>
  <!--endregion-->
  <!--region 按钮操作组-->
  <el-table-column>_x.show === true).length > 0">
  <template>
   <p>
   <template>
    <p>
    <el-button>{{ btn.label }}
    </el-button>
    </p>
   </template>
   </p>
  </template>
  </el-table-column>
  <!--endregion-->
 </el-table>
 </p>
<p></p>
 <!--region 分页-->
 <el-pagination></el-pagination>
 <!--endregion-->
 <!--region 数据筛选-->
 <p>
  <span>筛选过滤</span>
 </p>
 <!--endregion-->
 <!--region 表格操作-->
 <p>
  <span>表格操作</span>
 </p>
 <!--endregion-->
 
</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(&#39;handleSizeChange&#39;, size)
  this.pageIndex = 1
  },
  // 切换页码
  handleIndexChange (index) {
  this.$emit(&#39;handleIndexChange&#39;, index)
  this.pageIndex = index
  },
  // 多行选中
  handleSelectionChange (val) {
  this.multipleSelection = val
  this.$emit(&#39;handleSelectionChange&#39;, val)
  },
  // 显示 筛选弹窗
  showfilterDataDialog () {
  this.$emit(&#39;handleFilter&#39;)
  },
  // 显示 表格操作弹窗
  showActionTableDialog () {
  this.$emit(&#39;handelAction&#39;)
  }
 }
 }
</script>
<style>
 @import "../../assets/styles/mixins";
 .table {
 height: 100%;
 .el-pagination {
  float: right;
  margin: 20px;
 }
 .el-tableheader-wrapper, .el-tablefixed-header-wrapper {
  thead {
  tr {
   th {
   color: #333333;
   }
  }
  }
 }
 .el-table-column--selection .cell {
  padding: 0;
  text-align: center;
 }
 .el-tablefixed-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>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery程式碼最佳化方式的總結

Node.js的非對稱加密詳解

CSS3實現傾斜和旋轉動畫效果

#360瀏覽器相容模式的頁面顯示不全怎麼處理

以上是Vue2.5與Element UI的元件分頁功能實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！