Vue写一个图片列表分页组件

这是给vue-manager写的一个图片列表组件, 使用了iView组件, 目前只实现比较简单的分页、搜索和删除功能 编辑功能只是给一个链接，目的是为了跳转到其他页面进行编辑

项目地址:https://github.com/luosijie/vue-manager
预览地址: https://luosijie.github.io/vue-manager/#/imagelist

实现功能

1. 图片展示

2. 关键词搜索

3. 分页功能

4. 删除功能

功能分析

这个组件 vm-image-list 基本上分为两部分。
顶部操作区：可以关键词搜索，设置每页显示数目和分页。
底部展示区：循环使用另一个 vm-card 组件，并可以实现删除功能

属性

属性名	说明	例子
title	自定义标题
data	列表数据
delete-ok	删除事件

html结构

操作区域

搜索功能

...
methods: {
  search: function () {
    let that = this
    let tempData = that.data
    // dataShow 用来储存需要显示的列表项目
    that.dataShow = []
    tempData.forEach(function (elem) {
      for (let i in elem) {
        if (elem[i].toString().indexOf(that.keyword) > -1) {
          that.dataShow.push(elem)
            return
          }
        }
     })
  },
}
...

分页功能

methods: {
      // 从data数据中筛选出符合分页条件的数据
      updateDataShow: function () {
        // 分页开始的项目索引
        let startPage = (this.currentPage - 1) * this.showNum
        // 分页结束的项目索引
        let endPage = startPage + this.showNum
        this.dataShow = this.data.slice(startPage, endPage)
      },
      // 点击分页组件会返回页码， 根据页码更新dataShow数据(显示的项目)
      pageChange: function (page) {
        this.currentPage = page
        this.updateDataShow()
      }

展示区域

展示区域由独立的组件 vm-card 组成

属性

属性名	值	说明
type	vertical 或 horizantal	图片显示在上面或显示在左边
editable	Boolean	是否可编辑，可编辑显示编辑删除按钮
title	String	自定义标题
img	路径	图片
desc	Sring	描述:最多显示3行
detailUrl	链接	跳转到详情页
editUrl	链接	跳转到编辑页
delete-ok	事件	点击删除后的事件逻辑

Demo数据

先这样了，欢迎star