序文
関数の説明: 発生する要件の 1 つは、テーブルの tabledata 配列です。診療科の医師や多くの消費指標、その他のデータが含まれています。それから部門を整理してまとめる必要があります。次に、各部門の下にデータ行 (小計行) を追加します。上記の同じ部門のすべてのデータの概要を計算するために使用されます。次に、下部に別の合計行があり、すべての小計が加算されます。
レンダリング
これは並べ替え直後のテーブルの外観です。データは私がシミュレートし
、小計行を挿入すると次のようになります。
実装
論理フロー:
1. テーブル tableData のデータの取得を要求します。
2. 部門がすべて揃うように配列を並べ替え、セルを結合します。
3、配列をループし、対応する部門のインデックスを見つけ、配列に保存します。部門にちなんで名前を付けます。
4. 前から挿入すると小計が変わってしまうため、配列を反転して後ろから前に挿入します
5. 小計行を計算して直接挿入します。
コード
直接コピーして効果を確認することも、フィールドを変更して使用することもできます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 公共css文件 -->
<script src="./ceshi.js"></script>
<link rel="stylesheet" href="/statics/css/common/common.css">
<!-- 公共js文件 -->
<script type="text/javascript" src="/statics/vue_element/common.js"></script>
<!-- vue方面文件 -->
<script src="/statics/vue_element/vue.js"></script>
<script src="/statics/vue_element/element.js"></script>
<link rel="stylesheet" href="/statics/vue_element/element.css">
<script src="/statics/vue_element/axios.js"></script>
<script src="/mixins/quanxian.js"></script>
<title>测试页</title>
</head>
<body>
<div id="app" style="padding:10px;">
<el-table :data="tableDatas" border style="width: 100%" ref="configurationTable" :row-style="rowstyle"
:span-method="objectSpanMethod">
<el-table-column v-for="(arrd,index) in headers" :key="index" :label="arrd.name" align="center" width='100'
show-overflow-tooltip>
<!-- 有子级 -->
<el-table-column v-for="(arrd2,index2) in arrd.child" align="center" :label="arrd2.name"
show-overflow-tooltip>
<template slot-scope="{row, $index}">
<span>{
{
row[arrd2.key]}}</span>
</template>
</el-table-column>
<!-- 无子级 -->
<template slot-scope="{row, $index}">
<span>{
{
row[arrd.key]}}</span>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script type="text/javascript">
let v = new Vue({
el: '#app',
data() {
return {
tableDatas: [],//表体
headers: [],//表头
spanArr: []//合并单元格
}
},
mounted() {
this.searchList()
},
methods: {
// 模拟发送请求，拿到表格数据
searchList() {
let that = this
that.tableShow = false
// 模拟数据
that.headers = [{
child: [],
key: "ks",
name: "科室"
},
{
child: [],
key: "doctor",
name: "医生"
},
{
child: [],
key: "ghl",
name: "挂号"
},
{
child: [],
key: "jzl",
name: "就诊"
},
{
child: [],
key: "jz",
name: "体检"
}
],
that.tableDatas = [{
ks: "中医科",
doctor: '中医科医生1',
ghl: 6,
jzl: 5,
jz: 2,
}, {
ks: "中医科",
doctor: '中医科医生2',
ghl: 9,
jzl: 4,
jz: 3,
}, {
ks: "外科",
doctor: '外科医生2',
ghl: 7,
jzl: 3,
jz: 4,
}, {
ks: "外科",
doctor: '外科医生1',
ghl: 5,
jzl: 1,
jz: 5,
}, {
ks: "内科",
doctor: '内科医生3',
ghl: 2,
jzl: 1,
jz: 6,
}, {
ks: "内科",
doctor: '内科医生1',
ghl: 2,
jzl: 12,
jz: 7,
}]
this.tableDatas.sort(this.mysort);
this.groupHandle(that.tableDatas)
let hj = this.hj(that.tableDatas)
this.tableDatas.push(hj)
this.setdates()
},
// 根据科室排序
mysort(a, b) {
if (a.ks !== b.ks) {
if (a.ks !== null && a.ks !== undefined) {
return a.ks < b.ks ? -1 : 1;
} else {
return -1;
}
}
},
// 计算小计行插入位置
groupHandle(Human) {
let doctorMap = {
};
for (let i = 0; i < Human.length; i++) {
//找出相同名称的行数
let doctorName = Human[i].ks
if (doctorMap[doctorName] !== undefined) {
doctorMap[doctorName].push(i);
} else {
doctorMap[doctorName] = [i];
}
}
let keyArr = [];
for (let k in doctorMap) {
//取出key并倒序，防止正序插入会影响行下标
keyArr.unshift(k);
}
keyArr.forEach((ele, index) => {
let lastIndex = doctorMap[ele][doctorMap[ele].length - 1]; //找出相同名称最后一行插入合计数据
let obj = this.xj(Human, ele) //计算出小计行数据
Human.splice(lastIndex + 1, 0, obj) //插入
})
},
// 小计行计算
xj(data, name) {
let obj = {
ks: name, //科室名字，用于合并单元格
doctor: '小计',
ghl: 0,
jzl: 0,
jz: 0,
}
data.forEach(item => {
// 科室相同的加起来
if (item.ks == name) {
obj.ghl += (item.ghl ? parseFloat(item.ghl) : 0)
obj.jzl += (item.jzl ? parseFloat(item.jzl) : 0)
obj.jz += (item.jz ? parseFloat(item.jz) : 0)
}
})
return obj
},
// 合计行计算
hj(data) {
let hj = {
ks: '合计',
doctor: '-',
ghl: 0,
jzl: 0,
jz: 0,
}
data.forEach(item => {
// 小计行加起来就是合计
if (item.doctor == '小计') {
hj.ghl += (item.ghl ? parseFloat(item.ghl) : 0)
hj.jzl += (item.jzl ? parseFloat(item.jzl) : 0)
hj.jz += (item.jz ? parseFloat(item.jz) : 0)
}
})
return hj
},
// 行底纹
rowstyle({
row,
rowindex,
}) {
if (row.ks == '合计') {
return "background:#afdfe4;color:#34738f"
}
if (row.doctor == '小计') {
return "background: #D9EDF7;color:#34738f;border-bottom:1px solid #409eff !important;"
}
},
// 合并单元格
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
// 计算要合并的单元格
setdates() {
let contactDot = 0;
this.spanArr = []
this.tableDatas.forEach((item, index) => {
item.index = index;
if (index === 0) {
this.spanArr.push(1);
} else {
// 根据相同科室来合并
if (item.ks === this.tableDatas[index - 1].ks) {
this.spanArr[contactDot] += 1;
this.spanArr.push(0);
} else {
contactDot = index;
this.spanArr.push(1);
}
}
});
},
}
})
</script>
<style scoped>
</style>
</html>