export const tableTh = (dataLength, monthnum, el) => {
//th配置字典
returnData = [
{
keyId: "13",
tableColumns: [
{
title: "工业增加值增速",
align: "center",
children: [
{
title: "地 区",
key: "region",
align: "left"
},
{
title: "累计(%)",
fatherTitle: "工业增加值增速",
unit: "%",
key: "added_lj",
field: "added_lj",
align: "right",
render: (h, params) => {
return h(
"div",
{
on: {
click: () => {
if (params.row["added_lj"]) {
el.getColumnMethod(params, changeYearMonth, el);
}
}
}
},
// 所要展示内容
params.row["added_lj"]
? parseFloat(params.row["added_lj"]).toFixed(1)
: "-"
);
}
},
]
},
]
},
];
return returnData;
};
使用页面引用方式
methods: {
getColumnMethod(params, changeYearMonth, el) {}
}
//调用
import {
tableTh,
addedkey12Formdata,
addedkey14Formdata,
} from "@/utils/monthdatatableth";
this.tableColumns = tableTh(reslength, self.monthnum, self)
.filter(item => item.keyId === self.keyId)
.map(item => item.tableColumns)[0];
//vue
<DateList @yearmodel="yearmodel" @monthmodel="monthmodel"></DateList>
<TableDataview
v-show="docUrltype === 'excel'"
:table-columns="tableColumns"
:table-data="tableData"
:table-type="keyId"
></TableDataview>
组件使用
<!-- 选择器 --->
<template>
<div class="datelist">
<div>
<label>
<Select
v-model="yearmodel"
class="selectstyle"
@on-change="initMonth()"
>
<Option
v-for="(item, key) in yearList"
:value="item.label"
:key="key"
>{{ item.label }}</Option
>
</Select>
</label>
</div>
<div
class="monthblock"
:class="monthmodel === item.idx ? 'activemonth' : ''"
v-for="(item, key) in monthList"
:key="key"
@click="changeMonth(item.idx)"
>
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
name: "DateList",
data() {
return {
yearList: [],
yearmodel: "",
monthList: [],
monthmodel: ""
};
},
mounted() {
this.initDate();
},
methods: {
initDate() {
this.yearList = [];
let nowyear = new Date().getFullYear();
for (let i = 0; i <= 4; i++) {
if (nowyear - i > 2015) {
this.yearList.push({
label: nowyear - i
});
}
}
this.yearmodel = nowyear;
this.initMonth("init");
},
initMonth(operation) {
operation = operation || "";
let monthli;
this.monthList = [];
let nowmonth = new Date().getMonth() + 1;
let nowyear = new Date().getFullYear();
this.$emit("yearmodel", this.yearmodel, "init");
if (this.yearmodel === nowyear) {
monthli = nowmonth;
this.changeMonth(nowmonth, operation);
} else {
monthli = 12;
this.changeMonth(12, operation);
}
for (let i = 1; i <= monthli; i++) {
if (i !== 1) {
this.monthList.push({
idx: i,
label: i + "月"
});
}
}
},
changeMonth(idx, operation) {
operation = operation || "";
this.monthmodel = idx;
this.$emit("monthmodel", this.monthmodel, operation);
}
}
};
</script>
<!-- table 组件 --->
<template>
<div class="content">
<NoneData v-if="!tableData.length"></NoneData>
<div v-else style="height: 550px;overflow: auto">
<vue-scroll style="width: calc(100% - 20px)">
<Table
:columns="tableColumns"
:data="tableData"
:row-class-name="rowClassName"
class="contentbox"
:span-method="handleSpan"
height="550"
></Table>
</vue-scroll>
</div>
</div>
</template>
<script>
import NoneData from "@/components/none-data/none-data";
export default {
name: "TableDataview",
components: {
NoneData
},
props: {
tableData: {
type: Array,
default: () => []
},
tableColumns: {
type: Array,
default: () => []
},
tableType: {
type: String,
default: ""
}
},
data() {
return {
currency: ""
};
},
watch: {
tableData() {
let _this = this;
if (_this.tableType === "14") {
setTimeout(() => {
if (_this.$("table").length) {
_this.$("table")[0].tHead.children[0].children[0].rowSpan = 2;
_this.$("table")[0].tHead.children[1].children[0].remove();
}
}, 50);
}
}
},
methods: {
rowClassName(row) {
//根据列名选择哪一行可以点击
if (this.tableType === "13") {
if (row.region === "全国") {
return "demo-table-info-row";
} else if (row.region === "陕西") {
return "demo-table-one-row";
} else if (row.salesRegion === "陕西") {
return "demo-table-two-row";
}
} else {
if (row.region === "合计") {
return "demo-table-info-row";
} else if (row.region === "全国合计") {
return "demo-table-info-row";
} else if (row.region === "全国") {
return "demo-table-info-row";
} else if (row.region === "陕西") {
return "demo-table-info-row";
} else if (row.name === "分类" && row.INDUSTRY === "总计") {
return "demo-table-info-row";
}
return "";
}
},
handleSpan({ rowIndex, columnIndex }) {
//根据table表头的数目判断是否合并单元格
this.currency = this.tableColumns;
if (this.tableType === "14") {
if (rowIndex === 0 && columnIndex === 0) {
return {
rowspan: 1,
colspan: 1
};
} else if (rowIndex === 1 && columnIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex > 1 && rowIndex <= 4 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 5 && columnIndex === 0) {
return {
rowspan: 8,
colspan: 1
};
} else if (rowIndex > 5 && rowIndex <= 12 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 13 && columnIndex === 0) {
return {
rowspan: 9,
colspan: 1
};
} else if (rowIndex > 13 && rowIndex <= 21 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 22 && columnIndex === 0) {
return {
rowspan: 14,
colspan: 1
};
} else if (rowIndex > 22 && rowIndex <= 35 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 37 && columnIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex > 37 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
}
} else if (this.tableType === "15") {
if (rowIndex === 0 && columnIndex === 0) {
return {
rowspan: 10,
colspan: 1
};
} else if (rowIndex > 0 && rowIndex <= 9 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 11 && columnIndex === 0) {
return {
rowspan: 8,
colspan: 1
};
} else if (rowIndex > 11 && rowIndex <= 18 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 19 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex > 19 && rowIndex <= 20 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 21 && columnIndex === 0) {
return {
rowspan: 4,
colspan: 1
};
} else if (rowIndex > 21 && rowIndex <= 24 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 25 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex > 25 && rowIndex <= 26 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 27 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex > 27 && rowIndex <= 28 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 29 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex > 29 && rowIndex <= 30 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 31 && columnIndex === 0) {
return {
rowspan: 3,
colspan: 1
};
} else if (rowIndex > 31 && rowIndex <= 33 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 34 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex > 34 && rowIndex <= 35 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
} else if (rowIndex === 36 && columnIndex === 0) {
return {
rowspan: 2,
colspan: 1
};
} else if (rowIndex === 37 && columnIndex === 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
<style scoped lang="less">
.content {
text-align: left;
padding: 20px;
font-size: 14px;
}
/deep/ .demo-table-info-row td {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .contentbox tr td:first-child {
background: #1b2a4c !important;
cursor: default;
}
/deep/ .demo-table-one-row td:nth-child(2) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .demo-table-one-row td:nth-child(3) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .demo-table-one-row td:nth-child(4) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(5) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(6) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
/deep/ .demo-table-two-row td:nth-child(7) {
background-color: #477fff;
color: #fff;
cursor: pointer;
}
</style>
