Vue后台管理项目总结

简介

本文总结的是一个后台管理的前端项目,本项目主要介绍使用Vuex渲染深层复杂组件、table表格封装。table表格封装主要是因为后台管理项目有很多的表格展示,本项目使用的UI框架为Element-UI,但是不管是Vue还是React,对于表格封装的思路都适用。

table表格封装

思考:

  1. 表格接收传入的数据与列的展示
  2. 表格翻页后记录选中的
  3. 对于表格的操作一般是增删改查

1. 表格接收传入的数据与列的展示

我们可以对表格的列进行接口定义

1
2
3
4
5
6
7
8
export interface IDataCols {
name: string; // 表格列显示的名字
id: string; // 表格列对应后台数据里面的字段
width?: string; // 设置列的宽度
type?: string; // 列的类型,例如:date(日期格式展示)或click(列可以点击操作)
default?: string | number; // 默认值操作
.............. // 根据业务逻辑添加相应规则
}

在不同的页面,配置不同的列数据(此数据是写在页面的服务中的,固定不变的数据写在服务中,减少vue文件中的代码量,容易维护),例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export const reportPrintCols: IDataCols[] = [
{
name: '套餐名称',
id: 'title',
width: '500'
},
{
name: '报告待打印',
id: 'reportPrint',
type: 'click',
default: 0
},
{
name: '报告生成时间',
id: 'createTime',
type: 'date',
default: +new Date()
}
]

// 后台数据,例如:
data: [
{
title: '...',
reportPrint: '...',
createTime: '....',
......
},
.......
]

2. 表格翻页后记录选中的

table数据多时会有翻页需求和操作,默认翻页后数据会重新请求,那么需要记录选中和反选操作,就需要在页面做变量存储,select-all手动勾选和反选操作记录选中时所有数据或反选时的空数据,这时候需用当前的tableData来做操作,翻页后可以用

1
(this.$refs.multipleTable as ElTable).toggleRowSelection(/*当前行的数据*/, true||false);

来实现当前页的正反选操作。

3. 对于表格的操作一般是增删改查

table组件是一个公共组件,使用的地方很多,所以本组件内最好只负责相同操作的公共部分,具体的业务逻辑应该放在单独的页面当中,所以本组件应该接受增删改查时需要调用的方法,当需要进行操作时,直接调用即可。
组件中删除操作,接受删除的方法,在table组件中执行,新增、编辑、查找,把需要的数据传入父组件中,只调用父组件中相应函数,做逻辑处理。

Vuex渲染深层复杂组件

本人并没有使用Vuex,实现方式:

  1. 在处理这种深层复杂组件的数据更新上使用了Watch、与事件总线($emit,$on)的形式处理
  2. 把传入组件的数据做深层结构赋值给本组件的变量,来更新视图

使用Vuex处理,就很简单了,此示例仅为测试示例,使用的是mock数据,如需处理异步数据,可以在Action中进行,操作方法与Mutation类似:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// store
state: {
data: [
[
{
key: '0-0',
name: '小明',
age: 1,
}
],
[
{
key: '1-0',
name: '小红',
age: 11,
}
],
]
},
mutations: {
// 通过store.commit('set_data', {....})来更新数据, i表示data里面的key,k表示更改的属性,v表示更新的值
set_data(state: any, o: {i: string, k: string, v: string}) {
const arr: string[] = o.i.split('-');
arr.reduce((a, b) => {
return a[b];
}, state.data)[o.k] = o.v;

},
},

// 组件
// 在组件内引入store,使用store的commit方法更新store里面的数据来达到更新组件的效果
store.commit('set_data', {i, k, v: e.target.value});

总结

  1. 对于table组件的封装,主要适用于重复使用表格操作的地方,可以有效减少页面内模板的复写,和逻辑的重复,此组件的封装也要注意配置数据,对于多个页面重复使用的组件,其参数最好做成对象传入的形式,用配置的方式,避免使用组件的地方代码过长,不方便阅读。
  2. 对于Vuex的使用,在复杂数据深层组件渲染中,优势很明显,操作简单,容易维护。在一组数据多个组件使用时可以使用Vuex更方便操作,例如设置某些按钮的权限、某写页面的某个数值显示。

作者信息:宁文飞,人和未来大数据前端工程师