一、关于element插件做的后台管理系统

1、初印象

听说框架比较简单，实际开发需求时才发现有多崩溃，有些迷茫不知从何下手，后来疯狂百度找解决办法。这是我这几天遇到的难题先记录下

2、问题的解决办法

（1）、关于表格在屏幕下适配的问题（下面这个方法不是我最理想的，但是可以拿来用，等我找到更好的方法再来更新吧）

解决办法一：在data里写上

data(){ return { tableHeight: window.innerHeight * 0.7, } }

注意：在dom结构中加上

image.png

（2）、关于合并单元格的问题（既要合并行还要和并列）

效果图如下：

截图.png

在element官网上有静态表格的合并，但是表格数据加载后要根据条件进行判断

解决办法：

首先在method里写个方法

（这个方法是添加分页后也不会使表格错乱的）

getOrderNumber() {
this.spanArr = [] // 避免表格错乱！
this.tableData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1)
this.position = 0
} else {
if (this.tableData[index].type_code === this.tableData[index - 1].type_code) {
// 这里是要合并行
this.spanArr[this.position] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},

其中的spanArr position要在data里声明下

截图 (1).png

// 合并单元格
objectSpanMethod({row,column,rowIndex,columnIndex}) {
if(rowIndex === 0){ //合并列(第一行中的二三列)
if (columnIndex === 1) {
return [1,2];
}else if (columnIndex === 2) {
return [0, 0];
} }
if (columnIndex === 1 ) {//合并行
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
} } },

截图 (2).png

注意：方法 objectSpanMethod要在表头标明 getOrderNumber方法要在数据请求返回数据成功之后调用 （用法如下图）

截图 (3).png

（3）对于表格中某一行文字变色问题

截图 (4).png

解决办法：官网上有个方法显示

截图 (5).png

//合计行背景色
zonHeaderColor({row, rowIndex}) {
//console.log()
if (row.type_name === '小计') {
return 'color: rgb(64,158,255);'
}
if(row.type_name === '合计'){
return 'color: rgb(112,48,160);text-align:right;'
} },

截图 (6).png

（4）、关于表格排序问题

截图 (7).png

因为当前数据只是部分，有分页的所以需要后台进行排序（下图是element官网上显示的方法）

截图 (8).png
截图 (9).png

首先我们应该在表格上绑定这个方法

截图 (10).png

这个方法中写具体的排序规则

// 排序 sortChange({ order, prop }) {
// 保存状态
var flag = 0;
// 记录位置
var a = null;
// this.selectUnicode(prop);
var obj = {
orderName: prop,
orderNum: order == "descending" ? "desc" : "asc"
};
this.orders.forEach((item, index) => {
if (item.orderName == prop) {
console.log("相等");
flag = 1;
a = index;
} else {
flag = 0;
if (prop == null) {
flag = 2;
} } });
if (flag == 1) {
// 相同
this.orders.splice(a, 1, obj);
} else if (flag == 0) {
// 不同
this.orders.push(obj);
} else if (flag == 2) {
// 点岔劈了
this.emit("getDesc", this.orders); },

在要进行排序的列上添加如下图标注的属性

截图 (11).png

备注：https://www.cnblogs.com/steamed-twisted-roll/p/11069821.html这篇文章有对排序详细的描述（这是网上找的）

暂时遇到这些问题，有啥好的方法欢迎大佬指点，文章中有错误描述或方法也请小伙伴们积极找我反馈吆❥(^_-)