element-ui的使用（八）

我们的电商后台管理系统最后还有商品管理、订单管理、数据统计三个模块没有完成，但是后面的内容和前面的基本相同，包括：显示数据、添加数据、编辑信息以及删除等操作

1.商品管理

商品管理菜单中主要是用来显示商品数据并且包含一些基本操作：增加商品、编辑信息、删除等，以及商品参数和分类的管理

商品管理菜单中包含三个子菜单项：商品列表、分类参数、商品分类。

1.1 商品列表

商品列表主要由Breadcrum面包屑、Card面板、Table表格、Button按钮组成

这部分和用户管理部分很类似，主要是前端向服务器发送数据请求，服务器收到请求，响应数据，返回给前端,前端把响应的数据存储在定义好的数组中，然后在Table表格中交给数据源model，然后每一个Table-item接受数组中的对应的字段信息。这样商品数据就展示出来了。

至于添加商品、编辑商品以及删除商品部分，和之前的都类似，主要是请求接口的变化，思路是一致的，不再赘述

1.2 分类参数

分类参数中主要是对商品各个分类中的参数进行具体操作。

比较重要的是级联选择器以及扩展按钮（expand）

我们通过级联选择器选择出指定的商品，然后就可以在下方的Table表格中修改它的参数。

Cascader级联选择器是我们项目中经常使用的部分，个人感觉和Tree树形控件思想上很相似。

下面介绍一下Cascader的几个重要属性

• value:选中项绑定值
• options:可选项数据源，也就是我们级联选择器中显示数据的部分
• props:配置选项，也就是级联的选择器中的制定options数数据源中的数据，那个字段是显示数据，那个字段是children子选项等
• expand-trigger :次级菜单的展开方式，默认是click,我这里设置的hover

还有一个重要的事件

• change:当绑定值变化时触发事件，也就是我们选择好具体的三级目录时，会立刻触发此事件，请求该分类的具体参数

整体思路是这样的：

首先我们在页面创建完毕时，前端向服务器发送数据请求，我们把返回的数据存储在提前定义的数组中，然后把数组传给Cascader级联选择器的options属性（注意需要v-bind动态绑定），然后需要设置setpros，把它传给props，也就是配置选项，这样我们的级联选择器的基本架构完成。
然后需要添加change事件，当我们选择好三级分类后，change事件会默认存储我们选择项中的绑定值，也就是id,我们在请求数据时，需要携带该id.这样就大概完成了级联选择器。

setPorps:{

   value:'id',
   label:'name',
   children:'children'

}

其他的添加参数和编辑参数，不再赘述

1.3 商品分类

主要就是展示商品的各级分类以及添加分类操作，比较重要的是Table表格中的树形结构，这个需要用到插件，个人感觉用到的地方不多，就没有记录了！

2.订单管理

订单管理中只有一个子选项：订单列表

只需要请求订单列表数据后，展示在Table表格中即可。其他的不再赘述

3.数据统计

数据统计中只有一个子选项：数据报表

这里用到了echarts图表，这部分还是比较重要的，我这里详细介绍一些，vue项目中如何使用echarts

• 首先需要在vue项目中安装并引入echarts

安装echarts很简单，只需要执行以下命令：

npm install echarts --save

引入的方式由两种：全局引入或者局部引入

全局引入的话，需要在main.js文件中

import echarts from 'echarts'

Vue.prototype.$echarts=echarts

局部引入的话，就只需要在对应的.vue文件中引入即可

• 定义一个固定宽高的容器来存储图表

<div id="main" style="width: 600px;height:400px;"></div>

• 在script标签内绘制我们的图表(初始化实例、编辑配置项、执行配置项)

 <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>

这样我们的图表就完成了。

Echarts官网为我们提供了丰富的图表样式，我们可以直接把相关的配置项复制过来，直接用在我们的项目中

---

至此，我们的电商后台管理系统项目已经完成了。总共耗时六天。在实际的操作中，还是学到了很多东西的，我觉得编程思路还是很重要的，你只要知道他是怎么实现的，至于代码的话就无足轻重了。