<template>
<div>
<el-table :data="tableData" auto-reset-scroll :max-height="520" > <el-table-column header-align="center" :label="tableLebel" min-width="140" fixed > <template slot-scope="scope"> <span>{{ scope.row.typeName }}</span> </template> </el-table-column> <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 > <template slot-scope="scope"> <span :class="column.columnLabel == '业绩（万元）' ? 'active' : ''" @click="column.columnLabel == '业绩（万元）' ? handleClick(scope.row,scope.column,year) : ''" >{{ scope.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 > <template slot-scope="scope"> <span :class="column.columnLabel == '业绩（万元）' ? 'active' : ''" @click="column.columnLabel == '业绩（万元）' ? handleClick(scope.row,scope.column,year) : ''" >{{ scope.row[`${column.prop}_${year}`] }}</span> </template> </el-table-column> </el-table-column> </template> </el-table></div>
</template>
<script> import { fetchDialogTableData } from '@/api/analysis'export default { name: 'DataTable', components: { CsmTable, MultipleSelect }, props: { deadline: { type: String, default: '' }, tableLebel: { type: String, default: '' }, analyseType: { type: String, default: '' }, systemDate: { type: String, default: '' } }, data() { return { isLoading: false, tableColumns: [], // 列指标 selectedColumns: [], // 已选列指标 tableData: [], // 表格数据 yearList: [], // 年列表 gridData: [] } }, computed: { // 全量数据已选列 selectedAllColumns() { const { selectedColumns } = this return selectedColumns.filter(({ cutoff }) => !cutoff) },
// 限制数据已选列 selectedCutoffColumns() { const { selectedColumns } = this return selectedColumns.filter(({ cutoff }) => cutoff) } }, methods: { formatter(row) { // 业务分类（0 数据库，1 数据定制,2 数据超市） if (row.businessType == '0') { return '数据库' } else if (row.businessType == '1') { return '数据定制' } else { return '数据超市' } }, init(yearList, tableColumns, data) { this.yearList = yearList this.tableColumns = tableColumns this.selectedColumns = [].concat(tableColumns) this.tableData = data || [] }, // 请求表格弹框数据 async getDialogTableData(row, column, year) { let params = { analyseType: this.analyseType, systemDate: this.systemDate, type: row.type, // 分类Id,(省份id:*,合计:0，新客户1,老客户2) isCutoff: column.property.indexOf('all') != -1 ? '0' : '1', // 是否查询截止数据(0 否，1 是) year: year } let res = await fetchDialogTableData(params) // 后端接口定义的接口名称 if (res) { this.gridData = res this.isLoading = false } }, // 表格列点击事件 handleClick(row, column, year) { this.isLoading = true this.getDialogTableData(row, column, year) }, getHeaderWidth(str) { let strLength = this.computeStrOccupyLength(str) strLength = Math.ceil(strLength) return strLength * 15 + 30 }, // 计算字符串占用长度 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 }, /** * flexWidth * @param prop 每列的prop 可传'' * @param tableData 表格数据 * @param title 标题长内容短的，传标题 可不传 * @param num 列中有标签等加的富余量 * @returns 列的宽度 * 注：prop,title有一个必传 */ flexWidth(prop, tableData, title, num = 0) { if (tableData.length === 0) {//表格没数据不做处理 return; } let flexWidth = 0;//初始化表格列宽 let columnContent = '';//占位最宽的内容 let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); context.font = "14px Microsoft YaHei"; if ((prop === '') && title) {//标题长内容少的，取标题的值, columnContent = title } else {// 获取该列中占位最宽的内容 let index = 0; for (let i = 0; i < tableData.length; i++) { const now_temp = tableData[i][prop] + ''; const max_temp = tableData[index][prop] + ''; const now_temp_w = context.measureText(now_temp).width const max_temp_w = context.measureText(max_temp).width if (now_temp_w > max_temp_w) { index = i; } } columnContent = tableData[index][prop] //比较占位最宽的值跟标题、标题为空的留出四个位置 const column_w = context.measureText(columnContent).width const title_w = context.measureText(title).width if (column_w < title_w) { columnContent = title || '留四个字' } } // 计算最宽内容的列宽 let width = context.measureText(columnContent); flexWidth = width.width + 40 + num return flexWidth + 'px'; } } } </script> <style lang="scss" scoped> .active { color: #50308d; &:hover { text-decoration: underline; cursor: pointer; } } </style> 标签：vue,return,表格,title,element,let,prop,tableData,row From： https://www.cnblogs.com/xiaofang234/p/16769714.html