|
|
@@ -24,13 +24,13 @@
|
|
|
<!-- <h1 class="title">@table-merge/element-ui</h1>-->
|
|
|
|
|
|
<!-- <h2 class="box">合并行</h2>-->
|
|
|
- <div class="box">
|
|
|
+ <div >
|
|
|
<!-- <p>从第一行和第二例开始合并</p>-->
|
|
|
<!-- <pre>tableMergeElement(data, { range: { row: 1, col: 2 } })</pre>-->
|
|
|
- <el-table v-fit-columns :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11],col:[0,14] } })" border >
|
|
|
+ <el-table style="width: 100%;" :data="data1" :span-method="tableMergeElement(data1, { range: { row: [0, 11],col:[0,14] } })" border>
|
|
|
<!-- <el-table-column v-for="col in columns" :key="col.prop" v-bind="col" />-->
|
|
|
- <el-table-column prop="id" label="序号" width="70" align=‘center’></el-table-column>
|
|
|
- <el-table-column prop="projectName" label="项目名称" align=‘center’></el-table-column>
|
|
|
+ <el-table-column prop="id" label="序号" align=‘center’ ></el-table-column>
|
|
|
+ <el-table-column prop="projectName" label="项目名称" min-width="100%" align=‘center’></el-table-column>
|
|
|
<el-table-column prop="boxName" label="盒子名称" align=‘center’></el-table-column>
|
|
|
<el-table-column prop="onlineStatus" label="在线状态" align=‘center’>
|
|
|
<template slot-scope="scope">
|
|
|
@@ -258,6 +258,86 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 自适应表格列宽
|
|
|
+ flexColumnWidth (str, arr1, flag = 'max') {
|
|
|
+ console.log(str)
|
|
|
+ // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
|
|
|
+ // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
|
|
|
+ // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
|
|
|
+ str = str + ''
|
|
|
+ let columnContent = ''
|
|
|
+ if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {
|
|
|
+ return '80px' // 给个默认的
|
|
|
+ }
|
|
|
+ if (!str || !str.length || str.length === 0 || str === undefined) {
|
|
|
+ return '80px' // 给个默认的
|
|
|
+ }
|
|
|
+ if (flag === 'equal') {
|
|
|
+ // 获取该列中第一个不为空的数据(内容)
|
|
|
+ for (let i = 0; i < arr1.length; i++) {
|
|
|
+ if (arr1[i][str].length > 0) {
|
|
|
+ // console.log('该列数据[0]:', arr1[0][str])
|
|
|
+ columnContent = arr1[i][str]
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 获取该列中最长的数据(内容)
|
|
|
+ let index = 0
|
|
|
+ for (let i = 0; i < arr1.length; i++) {
|
|
|
+ if (arr1[i][str] === null) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const now_temp = arr1[i][str] + ''
|
|
|
+ const max_temp = arr1[index][str] + ''
|
|
|
+ if (now_temp.length > max_temp.length) {
|
|
|
+ index = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ columnContent = arr1[index][str]
|
|
|
+ }
|
|
|
+ // console.log('该列数据[i]:', columnContent)
|
|
|
+ // 以下分配的单位长度可根据实际需求进行调整
|
|
|
+ let flexWidth = 0
|
|
|
+ for (const char of columnContent) {
|
|
|
+ if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
|
|
|
+ // 如果是英文字符，为字符分配8个单位宽度
|
|
|
+ flexWidth += 8
|
|
|
+ } else if (char >= '\u4e00' && char <= '\u9fa5') {
|
|
|
+ // 如果是中文字符，为字符分配15个单位宽度
|
|
|
+ flexWidth += 15
|
|
|
+ } else {
|
|
|
+ // 其他种类字符，为字符分配8个单位宽度
|
|
|
+ flexWidth += 8
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (flexWidth < 80) {
|
|
|
+ // 设置最小宽度
|
|
|
+ flexWidth = 80
|
|
|
+ }
|
|
|
+ // if (flexWidth > 250) {
|
|
|
+ // // 设置最大宽度
|
|
|
+ // flexWidth = 250
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 可以再多留部分的padding
|
|
|
+ flexWidth += 30
|
|
|
+ return flexWidth + 'px'
|
|
|
+ },
|
|
|
+ cellStylePadding0({ row, column, ronIndex, columnIndex }) {
|
|
|
+ if (
|
|
|
+ column.property == "nt_connect_status" ||
|
|
|
+ column.property == "branchLastTime" ||
|
|
|
+ column.property == "branchThisTime" ||
|
|
|
+ column.property == "branchAddReduceQty" ||
|
|
|
+ column.property == "branchAddReducePercent"
|
|
|
+ ) {
|
|
|
+ return "padding:0";
|
|
|
+ } else {
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+ //console.log(column.property)
|
|
|
+ },
|
|
|
addClass({row,column,rowIndex,columnIndex}){
|
|
|
// console.log(columnIndex)
|
|
|
// console.log(row,column,rowIndex)
|
