实现的功能
使用到的Element-ui组件
组件名称_EN |
注册 |
备注 |
Timeline |
Vue.use(Timeline) |
时间线 |
TimelineItem |
Vue.use(TimelineItem) |
|
使用到的依赖
运行依赖,echarts
一、订单列表
1.渲染组件和子路由
2.布局
①面包屑导航
②卡片视图
③栅格系统 搜索框
④表格
⑤分页
3.获取渲染订单列表
①获取订单列表
②渲染订单列表
4、修改地址
①对话框显示和隐藏
②渲染表单省市区联动
<!-- [Order.vue] -->
<el-form
:model="addressForm"
:rules="addressFormRules"
ref="addressFormRef"
label-width="100px"
>
<el-form-item label="省市区县" prop="address1">
<el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="address2">
<el-input v-model="addressForm.address2"></el-input>
</el-form-item>
</el-form>
省市区文件
// [Order.vue]
import cityData from './citydata.js'
// [Order.vue -> data]
addressForm: {
address1: [],
address2: '',
},
cityData,
③清空表单
5、物流进度
①对话框显示和隐藏
②获取物流信息
③渲染时间线
<!-- [Order.vue] -->
<!-- 时间线 -->
<el-timeline>
<el-timeline-item
v-for="(activity, index) in progressInfo"
:key="index"
:timestamp="activity.time"
>{{activity.context}}</el-timeline-item>
</el-timeline>
二、数据报表
1.渲染组件和子路由
2.布局
①面包屑导航
②卡片视图
③图表
// [Report.vue]
// 1 导入echarts
import echarts from 'echarts'
import _ from 'lodash'
<!-- [Report.vue] -->
<!-- 2 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 750px;height:400px;"></div>
// [Report.vue -> data]
// 需要合并的数据
options: {
title: {
text: '用户来源',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {backgroundColor: '#E9EEF3',},
},
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
xAxis: [{boundaryGap: false,},],
yAxis: [{type: 'value',},],
},
// [Report.vue -> methods]
// 此时页面上的元素渲染完毕
async mounted() {
// 3 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error('获取折线图数据失败')
}
// 4 指定图表的配置项和数据
const result = _.merge(res.data,this.options)
// 5 使用刚指定的配置项和数据显示图表。
myChart.setOption(result)
},