vue之使用iview插件实现列表展示或table展示

iview学习地址：https://www.iviewui.com/

1.iview了解；

开发过项目后台管理系统的人都知道，很多数据都是呈一个列表的形式展现给管理员，或者以各种图展现。就比如，用户数据和一些优惠券信息等都需要以一个列表的形式展现给管理员；再就是一些用户的消费情况会以曲线图、折线图、柱状图等展示给管理员，用于用户分析，方便推荐。而在开发后台管理系统中，基本上都是很多前端人员参与开发，导致列表样式和布局都不一样，所以开发后台管理系统很需要一个统一的风格的表格，也需要一个合格的UI设计图纸才行。故为了节约开发成本，又能实现统一风格，选择iview是一个不错的选择，而且它是一套基于 Vue.js 的高质量 UI 组件库！

2.iview引用；

可参考：http://v1.iviewui.com/

1）首先，在你的vue项目中安装iview依赖；

在你的命令窗口输入：npm install iview --save（记得要先进去你的文件所在目录）

或者先在package.json文件里的"dependencies"下写下："iview": "^3.0.0",

然后再在命令窗口输入：npm install

均可。

2）安装之后，然后就在vue项目的入口文件里全局引入它；

即在main.js文件的头部写下：

import iView from 'iview';

3）由于通过npm下载的iview插件会自带一个样式文件，即iview.css，这个文件也需要导入进去；

即在main.js文件的头部写下：

import 'iview/dist/styles/iview.css';

3.效果；

这里先把效果图展示出来，让大家有个大概的认识：

4.后台返回的数据格式；

如下图：

5.使用；

知道后台返回的数据格式之后便可很清楚的知道该怎么使用iview了。

HTML部分：


<i-table border :content="self" :columns="columns" :data="giftCardsList"></i-table>

在显示列表的文件里引入<i-table>标签即可。

这里我需要解释下它的一些属性作用及一些值：

首先来看几个最常用的

1）content：设置单元格内渲染自定义组件时的上下文。比如父级是 $parent，根组件是 $root，当 i-table 作为一个 slot 封装在其它组件里时，会很有用；这里我用的是self，在data中我return了一个默认值，就是self: this。意思就是把this指向的对象复制一份给self，这样可避免this指向问题出现；

2）columns：表格列的配置描述，下面给出JS代码便可理解；

3）data：显示的结构化数据；

4）下面附上iTable的一些API图：

JS代码：

export default {
    data() {
      return {             
        giftCardsList: [],      
        self: this,
        columns:[
          {
            title:'Id',
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '优惠券名称',
            key: 'name',
            align: 'center'
          },
          {
              title: '类型',
              key: 'extent',
              align: 'center'
          },
          {
              title: '兑换内容',
              key: 'days',
              align: 'center'
          },
          {
            title: '有效期',
            key:'start_at',
            align: 'center',
          },
          {
            title:'已使用',
            key:"use",
            align: 'center',
          },
          {
            title:"剩余库存",
            key:"last",
            align: 'center'
          },
          {
            title:"使用率",
            key:"use_tate",
            align: 'center'
          },
          {
            title:"状态",
            key:"status",
            align: 'center'
          },
          {
            title:"操作",
            key:"actor",
            align:'center',
            render: (h, params) => {
              if(this.giftCardsList[params.index].status === '进行中'){
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                this.$router.push({ path: '../marketing_manage/add_gift_card?gcid=' + this.giftCardsList[params.index].gcid});
                            }
                        }
                    }, '编辑'),
                    h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        on: {
                            click: () => {
                                this.popupIsShow = true; 
                                this.gcid = this.giftCardsList[params.index].gcid;
                            }
                        }
                    }, '使失效')
                ]);
              }else{
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        on: {
                            click: () => {
                                this.$router.push({ path: '../marketing_manage/gift_card_warehouse?gcid=' + this.giftCardsList[params.index].gcid});
                            }
                        }
                    }, '码库')
                ]);
              }
            }
          }
        ],
      }
    },

下面是有关于columns的一些介绍：

5）博主这里已经将iview关于列表的大致使用已经陈述清楚了，也公布了后台返回的数据格式，只要将对应的字段填充在columns中就可以实现了。另外的一些点击事件，也可以查下官网里的介绍：http://v1.iviewui.com/components/table

6.补充；

引用iview插件之后，会对原来之前写的一些功能带来一些冲击，但是修复起来并不算困难。

这个是之前我写的导出列表功能实现的路径：https://blog.csdn.net/Charles_Tian/article/details/81146932

现在用上了iview，所以之前写的意味着要废弃了，下面来看看引入iview之后该怎么实现导出数据：

1）需要在Table的第一列新增一个复选框，用于选中项，官网给出的介绍如下：

由于新增的复选框是在data里面完成的，如下代码：

        columns:[
        {
          type: 'selection',
          width: 50,
          align: 'center',
        },
        {
          title:'id',
          key: 'id',
          width: 100,
          align: 'center',
        },
        {
          title: '兑换码',
          key: 'gccid',
          align: 'center'
        },
        {
            title: '会费名称',
            key: 'name',
            align: 'center'
        },
        {
            title: '类型',
            key: 'extent',
            align: 'center'
        },
        {
          title: '有效期',
          key:'start_at',
          align: 'center',
        },
        {
          title:'使用人',
          key:"username",
          align: 'center',
        },
        {
          title:"兑换时间",
          key:"use_at",
          align: 'center'
        },
        {
          title:"状态",
          key:"status",
          align: 'center'
        }
      ],

很明显的看出，新增了三行代码，即：

        {
          type: 'selection',
          width: 50,
          align: 'center',
        },

新增完之后，看下效果图：

2）说明下该怎么使用这三个事件；

刚开始始终不知道到底该怎么用，不知道选中事件应该添加到哪里，后来慢慢尝试发现，这三个事件之一是要绑定要<i-table>组件上的，如下HTML代码：

<i-table height="660" border :content="self" :columns="columns" :data="warehouseList" ref="table" @on-selection-change="gccidArr"></i-table>

由于项目支持部分数据导出，所以最终选择了@on-select-change事件

3）官网里又介绍，触发该事件之后，返回值为selection，那么这个selection的值我们到底该怎么用呢？

由于我们创建了一个名为gccidArr的方法名，那么我们需要在methods里面定义它，如下代码：

    gccidArr(selection){
      this.selection = selection;
    },

就这么简单就获取到了你选中的数据了。注意：这里的数据是一行的数据，不是某一个具体的值，如果想要获取，可以在columns里面新增一个render方法

4）我们可以验证下，如下图：

我分别选中三个，每次都会打印出selection的值，所以我们的应用方向是正确的。

5）选中之后并保存在内存中，但是我们到底要怎么导出呢？而导出的数据恰好是我们所选中的呢？

首先肯定要新增一个导出的按钮，如HTML代码：

<i-table height="660" border :content="self" :columns="columns" :data="warehouseList" ref="table" @on-selection-change="gccidArr"></i-table>
<i-button style="margin-top:10px" type="primary" size="large" @click="exportData()"><Icon type="ios-download-outline"></Icon> 导出数据 </i-button>

这个i-button也是iview应用之一，大家可自行官网了解。

同样的，要在methods里定义一个名为exportData的方法，导出数据JS代码如下：

    exportData: function(){
      let self = this;
      this.$refs.table.exportCsv({
          filename: '码库',
          original: false, 
          columns: self.columns,
          data: self.selection
      });
    },

下面是exportCsv的用法和属性介绍：

由于我们要导出的是自定义数据，所以original要为false，另外columns和data必须同时定义。

执行操作之后，我们便可以得到一个名为码库的csv文件，里面就是我们选中的数据。

6）可能会有童鞋会问，要是有些数据是不可选中的呢？意思就是我要想某些行数据的前面没有复选框，那该怎么实现？

这个问题其实也好解决，只需要将前面的复选框失效就好了，就是不能点击的状态，那么用iview怎么实现呢？

大家可看官网里这样的介绍：

意思就是在data对象（就是后台返回的数据，也即应用table里的数据，也就是上文在HTML代码里的:data="warehouseList"里的warehouseList）里面添加一个属性_disabled，且它的值为true即可，看JS代码：


    handleDeadline: function(warehouseList){
      warehouseList.forEach(element => {
        if(element.status == '0'){
          element['_disabled'] = true;
        }
      });
      return warehouseList;
    },

然后调用这个函数即可，看效果图：

明显看到复选框为暗色了，我也测试了，不可点击，所以selection里面也没值，完美解决~

vue之使用iview插件实现列表展示或table展示

猜你喜欢