<template>
<div>
<el-table
ref="tableData"
:data="tableData"
show-summary
:max-height="520"
:summary-method="summaryMethod"
:default-sort="sortRule"
@sort-change="sortChange"
>
<el-table-column
v-if="analyseType==='5'"
key="provice"
header-align="center"
label="省份"
prop="typeName"
min-width="140"
fixed
/>
<el-table-column
v-else
key="customerType"
header-align="center"
label="客戶類型"
prop="typeName"
min-width="140"
fixed
/>
<template v-for="year in yearList">
<el-table-column
v-if="selectedAllColumns.length"
:key="`${year}_all`"
header-align="center"
:label="`${year}`"
>
<el-table-column
v-for="column in selectedAllColumns"
:key="`${column.prop}_${year}`"
:prop="`${column.prop}_${year}`"
:label="column.columnLabel"
:min-width="getHeaderWidth(column.columnLabel)"
sortable="custom"
>
<template slot-scope="{row,column:scopeColumn}">
<span
v-if="column.columnLabel === '業(yè)績(jī)（萬元）'"
class="link-style"
@click="handleCeilClick(row,scopeColumn,year)"
>
{{ row[`${column.prop}_${year}`] }}
</span>
<span v-else>{{ formatCeilData(column.columnLabel,row[`${column.prop}_${year}`]) }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column
v-if="selectedCutoffColumns.length"
:key="`${year}_cutoff`"
header-align="center"
:label="`${year}，其中截止${deadline}`"
>
<el-table-column
v-for="column in selectedCutoffColumns"
:key="`${column.prop}_${year}`"
:prop="`${column.prop}_${year}`"
:label="column.columnLabel"
:min-width="getHeaderWidth(column.columnLabel)"
sortable="custom"
>
<template slot-scope="{row,column:scopeColumn}">
<span
v-if="column.columnLabel === '業(yè)績(jī)（萬元）'"
class="link-style"
@click="handleCeilClick(row,scopeColumn,year)"
>
{{ row[`${column.prop}_${year}`] }}
</span>
<span v-else>{{ formatCeilData(column.columnLabel,row[`${column.prop}_${year}`]) }}</span>
</template>
</el-table-column>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: 'DataTable',
props: {
deadline: {
type: String,
default: ''
},
tableLebel: {
type: String,
default: ''
},
analyseType: {
type: String,
default: ''
},
systemDate: {
type: String,
default: ''
}
},
data() {
return {
tableColumns: [], // 列指標(biāo)
selectedColumns: [], // 已選列指標(biāo)
tableData: [], // 表格數(shù)據(jù)
yearList: [], // 年列表
sortRule: { prop: null, order: null },
sortData: [] // 拷貝的表格數(shù)據(jù)
}
},
computed: {
// 全量數(shù)據(jù)已選列
selectedAllColumns() {
const { selectedColumns } = this
return selectedColumns.filter(({ cutoff }) => !cutoff)
},
// 限制數(shù)據(jù)已選列
selectedCutoffColumns() {
const { selectedColumns } = this
return selectedColumns.filter(({ cutoff }) => cutoff)
}
},
methods: {
init(yearList, tableColumns, data) {
this.totalRow = data.pop() || {}
this.yearList = yearList
this.tableColumns = tableColumns
this.selectedColumns = [].concat(tableColumns)
this.tableData = data || []
this.sortData = data || []
this.$nextTick(() => {
const { tableData } = this.$refs
if (tableData) {
tableData && this.setScrollXY() // 解決滾動(dòng)條不重置問題
tableData && tableData.doLayout() // 解決表格固定列塌陷導(dǎo)致無數(shù)據(jù)顯示
}
})
},
setScrollXY(scrollLeft = 0, scrollTop = 0) {
const { $el } = this.$refs.tableData
const wrapper = $el.querySelector('.el-table__body-wrapper') // 滾動(dòng)的元素類名
wrapper && Object.assign(wrapper, {
scrollLeft,
scrollTop
})
},
// 表格列點(diǎn)擊事件
handleClick(row, column, year) {
console.log(row, column, year)
},
// 表格合計(jì)保持在最后
summaryMethod({ columns }) {
const total = ['合計(jì)']
for (let i = 1, l = columns.length; i < l; i++) {
const { property } = columns[i]
total[i] = this.formatCeilData(columns[i].label, this.totalRow[property])
}
return total
},
// 針對(duì)拼接百分比的單元格顯示值格式化
formatCeilData(columnLabel, val) {
if (['業(yè)績(jī)占比', '同期業(yè)績(jī)?cè)鲩L(zhǎng)率'].includes(columnLabel)) {
if (![null, undefined, '', '/'].includes(val)) {
return val + '%'
}
}
return val
},
// 表格排序方法（/排最后）
sortChange(column) {
const { prop, order } = column
if (order != null) {
const data = []
for (let i = 0; i < this.tableData.length; i++) {
//tableData是el-tabel綁定的表格數(shù)據(jù)
//判斷如果是空的push在數(shù)字后面，有值的就放在前面，然后把排好的數(shù)組再賦值給表格data
const value = this.tableData[i][prop]
if ([null, '', '/', undefined].includes(value)) {
data.push(this.tableData[i])
} else {
data.unshift(this.tableData[i])
}
}
// 自定義排序方法 過濾掉 null undefined '' 等空值
data.sort((a, b) => {
const aValue = a[prop]
const bValue = b[prop]
if (aValue === bValue) {
return 0;
} else if ([null, '', '/', undefined].includes(aValue)) {
return 1;
} else if ([null, '', '/', undefined].includes(bValue)) {
return -1;
} else if (order === "ascending") {
// 升序
return Number(aValue) < Number(bValue) ? -1 : 1
} else {
// 降序
return Number(aValue) < Number(bValue) ? 1 : -1
}
});
this.tableData = data //最后把排序好的表格數(shù)據(jù)賦值給排序前的表格數(shù)據(jù)
} else { //如果不排序了，就恢復(fù)到最初未排序的狀態(tài)
this.tableData = this.sortData // 用之前拷貝的數(shù)據(jù)還原默認(rèn)排序
}
Object.assign(this.sortRule, {
prop,
order
})
},
clear() {
this.yearList = []
this.tableColumns = []
this.selectedColumns = []
this.tableData = []
},
getHeaderWidth(str) {
let strLength = this.computeStrOccupyLength(str)
strLength = Math.ceil(strLength)
return strLength * 15 + 30
},
// 計(jì)算字符串占用長(zhǎng)度
computeStrOccupyLength(str) {
let num = 0
str.split('').forEach((s) => {
if (/[0-9a-z]|[.?()-:/\\]|\s/.test(s)) {
num += 0.5
} else if (/[A-Z]/.test(s)) {
num += 0.7
} else {
num += 1
}
})
return num
}
}
}
</script>
<style lang="scss" scoped>
.link-style {
color: #50308d;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
</style>
浙公網(wǎng)安備 33010602011771號(hào)