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	自定义标题	<VmImageList title="Image List"></VmImageList>
data	列表数据	<VmImageList :data="dataImageList"></VmImageList>
delete-ok	删除事件	<VmImageList @delete-ok="deletefn"></VmImageList>

html结构

<template>
  <div class="vm-image-list">
    <Row class="image-list-heading vm-panel">
      <div class="panel-heading">
        //标题
        ...
      </div>
      <Row type="flex" align="middle" justify="space-between" class="panel-body">
        //操作区
        ...
      </Row>
    </Row>
    <Row class="image-list" :gutter="16">
      //图片列表展示区
      <Col :lg="6" :sm="12" class="vm-margin" v-for="item in dataShow" :key="item.id">
        //引入vm-card组件展示图片信息
        <VmCard :editable="true" :title="item.title" :img="item.img" :desc="item.desc" :detailUrl="item.detailUrl" :editUrl="item.editUrl&#