|
@@ -1,14 +1,55 @@
|
|
|
<!-- 搜索表单 -->
|
|
<!-- 搜索表单 -->
|
|
|
<template>
|
|
<template>
|
|
|
<div style="margin-top: 10px">
|
|
<div style="margin-top: 10px">
|
|
|
|
|
+ <div v-if="isSelecting" class="selection-box" :style="selectionStyle"></div>
|
|
|
<el-button type="primary" @click="addColumn()" v-if="edit"
|
|
<el-button type="primary" @click="addColumn()" v-if="edit"
|
|
|
>新增列</el-button
|
|
>新增列</el-button
|
|
|
>
|
|
>
|
|
|
- <el-button type="primary" @click="addRow(columns.length)" v-if="edit"
|
|
|
|
|
|
|
+ <el-button type="primary" @click="addRow(columns[0].length)" v-if="edit"
|
|
|
>新增行</el-button
|
|
>新增行</el-button
|
|
|
>
|
|
>
|
|
|
|
|
+ <el-checkbox v-model="isMerge" style="margin-left: 10px">合并单元格</el-checkbox>
|
|
|
<div class="table" style="margin-top: 10px" :id="id">
|
|
<div class="table" style="margin-top: 10px" :id="id">
|
|
|
- <div class="table-body" style="display: flex">
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="table-body"
|
|
|
|
|
+ style="display: flex"
|
|
|
|
|
+ @mousedown="startSelecting"
|
|
|
|
|
+ @mousemove="updateSelection"
|
|
|
|
|
+ @mouseup="stopSelecting"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- <el-popover
|
|
|
|
|
+ style="position: fixed; z-index: 2000"
|
|
|
|
|
+ width="400"
|
|
|
|
|
+ ref="popoverRef"
|
|
|
|
|
+ v-model="rightClickShow"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-card class="box-card">
|
|
|
|
|
+ <div slot="header" class="clearfix" @click="rightClickShow = false">
|
|
|
|
|
+ <span>合并单元格</span>
|
|
|
|
|
+ <i class="el-icon-close" style="float: right; padding: 3px 0"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text item">
|
|
|
|
|
+ 向前合并:
|
|
|
|
|
+ <el-input v-model="beforeNum" style="width: 100px" type="number">
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ 列
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text item" style="margin-top: 10px">
|
|
|
|
|
+ 向后合并:
|
|
|
|
|
+ <el-input v-model="laterNum" style="width: 100px" type="number">
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ 列
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ style="float: right; margin-bottom: 5px"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="save"
|
|
|
|
|
+ >确认</el-button
|
|
|
|
|
+ >
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </el-card>
|
|
|
|
|
+ </el-popover> -->
|
|
|
<template v-for="(row, index) in columns">
|
|
<template v-for="(row, index) in columns">
|
|
|
<div class="column" :style="{ width: row[0].width + 'px' }">
|
|
<div class="column" :style="{ width: row[0].width + 'px' }">
|
|
|
<div
|
|
<div
|
|
@@ -16,30 +57,33 @@
|
|
|
v-for="(item, rowIndex) in row"
|
|
v-for="(item, rowIndex) in row"
|
|
|
:style="{
|
|
:style="{
|
|
|
height: item.rowspan * 30 + 'px',
|
|
height: item.rowspan * 30 + 'px',
|
|
|
- display: item.rowspan ? 'block' : 'none'
|
|
|
|
|
|
|
+ display: item.rowspan ? 'block' : 'none',
|
|
|
|
|
+ ...item.style,
|
|
|
|
|
+ width: item.colspan ? getWidth(item) : 0
|
|
|
}"
|
|
}"
|
|
|
|
|
+ @contextmenu.prevent="onRightClick($event, rowIndex, index)"
|
|
|
>
|
|
>
|
|
|
<i
|
|
<i
|
|
|
class="el-icon-delete delete"
|
|
class="el-icon-delete delete"
|
|
|
style="display: none"
|
|
style="display: none"
|
|
|
- @click="removeColumn(index)"
|
|
|
|
|
|
|
+ @click="removeColumn(item,index)"
|
|
|
v-if="edit && rowIndex == 0"
|
|
v-if="edit && rowIndex == 0"
|
|
|
></i>
|
|
></i>
|
|
|
<i
|
|
<i
|
|
|
class="el-icon-circle-plus-outline add"
|
|
class="el-icon-circle-plus-outline add"
|
|
|
style="display: none"
|
|
style="display: none"
|
|
|
- @click="addColumn(index)"
|
|
|
|
|
|
|
+ @click="addColumn(item)"
|
|
|
v-if="edit && rowIndex == 0"
|
|
v-if="edit && rowIndex == 0"
|
|
|
></i>
|
|
></i>
|
|
|
<i
|
|
<i
|
|
|
class="el-icon-delete deleteRow"
|
|
class="el-icon-delete deleteRow"
|
|
|
@click="removeRow(rowIndex)"
|
|
@click="removeRow(rowIndex)"
|
|
|
- v-if="edit && rowIndex != 0"
|
|
|
|
|
|
|
+ v-if="edit && rowIndex != 0 && item.style?.border != 'none'"
|
|
|
></i>
|
|
></i>
|
|
|
<i
|
|
<i
|
|
|
class="el-icon-circle-plus-outline addRow"
|
|
class="el-icon-circle-plus-outline addRow"
|
|
|
style="display: none"
|
|
style="display: none"
|
|
|
- @click="addRow(rowIndex, index)"
|
|
|
|
|
|
|
+ @click="addRow(rowIndex, item)"
|
|
|
v-if="edit && rowIndex != 0 && index != columns.length - 1"
|
|
v-if="edit && rowIndex != 0 && index != columns.length - 1"
|
|
|
></i>
|
|
></i>
|
|
|
<textarea
|
|
<textarea
|
|
@@ -47,6 +91,7 @@
|
|
|
v-model="item.value"
|
|
v-model="item.value"
|
|
|
class="templateInput"
|
|
class="templateInput"
|
|
|
:id="item.id"
|
|
:id="item.id"
|
|
|
|
|
+ :ref="item.id + 'ref'"
|
|
|
:readonly="item.readonly == 2 || !edit"
|
|
:readonly="item.readonly == 2 || !edit"
|
|
|
@click="inputClick(item)"
|
|
@click="inputClick(item)"
|
|
|
@input="calculation"
|
|
@input="calculation"
|
|
@@ -58,6 +103,7 @@
|
|
|
v-model="item.value"
|
|
v-model="item.value"
|
|
|
class="templateInput"
|
|
class="templateInput"
|
|
|
:id="item.id"
|
|
:id="item.id"
|
|
|
|
|
+ :ref="item.id + 'ref'"
|
|
|
:readonly="item.readonly == 2 || !edit"
|
|
:readonly="item.readonly == 2 || !edit"
|
|
|
@click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
|
|
@click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
|
|
|
@input="calculation"
|
|
@input="calculation"
|
|
@@ -94,17 +140,146 @@
|
|
|
rightClickShow: false,
|
|
rightClickShow: false,
|
|
|
columns: [],
|
|
columns: [],
|
|
|
units: {},
|
|
units: {},
|
|
|
- equation: {}
|
|
|
|
|
|
|
+ equation: {},
|
|
|
|
|
+ beforeNum: 0,
|
|
|
|
|
+ laterNum: 0,
|
|
|
|
|
+ currentRowIndex: 0,
|
|
|
|
|
+ currentColumnIndex: 0,
|
|
|
|
|
+ isSelecting: false,
|
|
|
|
|
+ startX: 0,
|
|
|
|
|
+ startY: 0,
|
|
|
|
|
+ endX: 0,
|
|
|
|
|
+ endY: 0,
|
|
|
|
|
+ selectedItems: [],
|
|
|
|
|
+ isMerge: false
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
created() {},
|
|
created() {},
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ selectionStyle() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ position: 'fixed',
|
|
|
|
|
+ left: `${Math.min(this.startX, this.endX)}px`,
|
|
|
|
|
+ top: `${Math.min(this.startY, this.endY)}px`,
|
|
|
|
|
+ width: `${Math.abs(this.endX - this.startX)}px`,
|
|
|
|
|
+ height: `${Math.abs(this.endY - this.startY)}px`,
|
|
|
|
|
+ border: '2px dashed black'
|
|
|
|
|
+ };
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ startSelecting(event) {
|
|
|
|
|
+ if(!this.isMerge){
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isSelecting = true;
|
|
|
|
|
+ this.startX = event.clientX;
|
|
|
|
|
+ this.startY = event.clientY;
|
|
|
|
|
+ this.endX = this.startX;
|
|
|
|
|
+ this.endY = this.startY;
|
|
|
|
|
+ console.log(this.startX, this.startY, this.endX, this.endY);
|
|
|
|
|
+ },
|
|
|
|
|
+ updateSelection(event) {
|
|
|
|
|
+ if (this.isSelecting) {
|
|
|
|
|
+ this.endX = event.clientX;
|
|
|
|
|
+ this.endY = event.clientY;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ stopSelecting() {
|
|
|
|
|
+ this.isSelecting = false;
|
|
|
|
|
+ // 在这里处理框选结果,例如计算被框选的元素
|
|
|
|
|
+ this.calculateSelectedItems();
|
|
|
|
|
+ },
|
|
|
|
|
+ calculateSelectedItems() {
|
|
|
|
|
+ this.selectedItems = [];
|
|
|
|
|
+ this.columns.forEach((cell, columnIndex) => {
|
|
|
|
|
+ cell.forEach((row, rowIndex) => {
|
|
|
|
|
+ const rect = this.$refs[row.id + 'ref'][0].getBoundingClientRect();
|
|
|
|
|
+ if (
|
|
|
|
|
+ rect.left < this.endX &&
|
|
|
|
|
+ rect.right > this.startX &&
|
|
|
|
|
+ rect.top < this.endY &&
|
|
|
|
|
+ rect.bottom > this.startY
|
|
|
|
|
+ ) {
|
|
|
|
|
+ row.columnIndex = columnIndex;
|
|
|
|
|
+ row.rowIndex = rowIndex;
|
|
|
|
|
+ this.selectedItems.push(row);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ // console.log(this.selectedItems, 'this.selectedItems[0]');
|
|
|
|
|
+ // return
|
|
|
|
|
+
|
|
|
|
|
+ if (this.selectedItems.length < 1) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ let _columnIndex = this.selectedItems[0].columnIndex;
|
|
|
|
|
+ let _rowIndex = this.selectedItems[0].rowIndex;
|
|
|
|
|
+ let _colspan = this.selectedItems[0].colspan;
|
|
|
|
|
+ let rowspan = this.selectedItems
|
|
|
|
|
+ .filter((item) => item.columnIndex === _columnIndex)
|
|
|
|
|
+ .reduce((acc, cur) => acc + cur.rowspan, 0);
|
|
|
|
|
+ if (this.verify(_colspan, rowspan, this.selectedItems)) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ for (let index = 0; index < this.selectedItems.length; index++) {
|
|
|
|
|
+ let item = this.selectedItems[index];
|
|
|
|
|
+ if (index != 0) {
|
|
|
|
|
+ if (!this.selectedItems[0].style) {
|
|
|
|
|
+ this.selectedItems[0].style = {};
|
|
|
|
|
+ }
|
|
|
|
|
+ if (
|
|
|
|
|
+ this.selectedItems[0].rowIndex == item.rowIndex &&
|
|
|
|
|
+ this.selectedItems[0].columnIndex != item.columnIndex
|
|
|
|
|
+ ) {
|
|
|
|
|
+ this.selectedItems[0].colspan += item.colspan;
|
|
|
|
|
+ this.selectedItems[0].colspanKey.push(item.id);
|
|
|
|
|
+ this.selectedItems[0].colspanKey.push(...item.colspanKey);
|
|
|
|
|
+ }
|
|
|
|
|
+ if (
|
|
|
|
|
+ this.selectedItems[0].rowIndex != item.rowIndex &&
|
|
|
|
|
+ this.selectedItems[0].columnIndex == item.columnIndex
|
|
|
|
|
+ ) {
|
|
|
|
|
+ this.selectedItems[0].rowspan += item.rowspan;
|
|
|
|
|
+ item.rowspan = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ item.colspan = 0;
|
|
|
|
|
+ item.style = {
|
|
|
|
|
+ border: 'none'
|
|
|
|
|
+ };
|
|
|
|
|
+ this.$set(this.columns[item.columnIndex], item.rowIndex, item);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$set(this.columns[_columnIndex], _rowIndex, this.selectedItems[0]);
|
|
|
|
|
+ },
|
|
|
|
|
+ colspanSum(rowIndex) {
|
|
|
|
|
+ return this.selectedItems.filter((item) => item.rowIndex == rowIndex);
|
|
|
|
|
+ },
|
|
|
|
|
+ verify(_colspan, _rowspan, arr) {
|
|
|
|
|
+ console.log(arr, 'arr');
|
|
|
|
|
+ console.log(_colspan, '_colspan');
|
|
|
|
|
+ console.log(_rowspan, '_rowspan');
|
|
|
|
|
+
|
|
|
|
|
+ for (let index = 0; index < arr.length; index++) {
|
|
|
|
|
+ let item = arr[index];
|
|
|
|
|
+
|
|
|
|
|
+ if (item.rowspan > _rowspan) {
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
// 方法:添加新列
|
|
// 方法:添加新列
|
|
|
- addColumn(index) {
|
|
|
|
|
|
|
+ addColumn(item) {
|
|
|
let length = this.columns[0]?.length || 1;
|
|
let length = this.columns[0]?.length || 1;
|
|
|
- if (index === 0 || index) {
|
|
|
|
|
|
|
+ if (item) {
|
|
|
|
|
+ let _columnIndex = item.columnIndex;
|
|
|
|
|
+ if (item.colspan > 1) {
|
|
|
|
|
+ _columnIndex += Number(item.colspan - 1);
|
|
|
|
|
+ }
|
|
|
this.columns.splice(
|
|
this.columns.splice(
|
|
|
- index + 1,
|
|
|
|
|
|
|
+ _columnIndex + 1,
|
|
|
0,
|
|
0,
|
|
|
Array(length)
|
|
Array(length)
|
|
|
.fill(null)
|
|
.fill(null)
|
|
@@ -123,48 +298,40 @@
|
|
|
readonly: 1,
|
|
readonly: 1,
|
|
|
value: '',
|
|
value: '',
|
|
|
rowspan: 1,
|
|
rowspan: 1,
|
|
|
|
|
+ colspan: 1,
|
|
|
|
|
+ colspanKey: [],
|
|
|
|
|
+ width: 100,
|
|
|
|
|
+ style: { width: 100 },
|
|
|
id: generateRandomString(5)
|
|
id: generateRandomString(5)
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
// 方法:删除指定列
|
|
// 方法:删除指定列
|
|
|
- removeColumn(index) {
|
|
|
|
|
|
|
+ removeColumn(item,index) {
|
|
|
|
|
+
|
|
|
this.columns.splice(index, 1);
|
|
this.columns.splice(index, 1);
|
|
|
|
|
+ this.columns.forEach((row, columnIndex) => {
|
|
|
|
|
+ row.forEach((cell, index) => {
|
|
|
|
|
+ if (item?.colspanKey.includes(cell.id)) {
|
|
|
|
|
+ this.columns.splice(columnIndex, 1);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
// 方法:添加新行
|
|
// 方法:添加新行
|
|
|
- addRow(rowIndex, columnIndex) {
|
|
|
|
|
- if (columnIndex > 0) {
|
|
|
|
|
- //不是第一列则需要合并单元格
|
|
|
|
|
- this.columns.forEach((item, newColumnIndex) => {
|
|
|
|
|
- let newRow = this.getInput();
|
|
|
|
|
- if (newColumnIndex < columnIndex) {
|
|
|
|
|
- newRow.rowspan = 0;
|
|
|
|
|
- let _rowIndex = null;
|
|
|
|
|
- if (item[rowIndex].rowspan == 0) {
|
|
|
|
|
- _rowIndex = this.getPreventRowspan(newColumnIndex, rowIndex);
|
|
|
|
|
- }
|
|
|
|
|
- let rowspan =
|
|
|
|
|
- this.columns[newColumnIndex][_rowIndex || rowIndex].rowspan ||
|
|
|
|
|
- 1;
|
|
|
|
|
|
|
+ addRow(rowIndex, row) {
|
|
|
|
|
+ let _rowIndex = rowIndex;
|
|
|
|
|
|
|
|
- this.$set(
|
|
|
|
|
- this.columns[newColumnIndex][_rowIndex || rowIndex],
|
|
|
|
|
- 'rowspan',
|
|
|
|
|
- (rowspan += 1)
|
|
|
|
|
- );
|
|
|
|
|
- }
|
|
|
|
|
- this.columns[newColumnIndex].splice(rowIndex + 1, 0, newRow);
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- this.columns.forEach((item, index) => {
|
|
|
|
|
- let _rowIndex = rowIndex;
|
|
|
|
|
- if (item[rowIndex]?.rowspan > 1) {
|
|
|
|
|
- _rowIndex += Number(item[rowIndex].rowspan);
|
|
|
|
|
- }
|
|
|
|
|
- this.columns[index].splice(_rowIndex + 1, 0, this.getInput());
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ if (row?.rowspan > 1) {
|
|
|
|
|
+ _rowIndex += Number(row?.rowspan - 1);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ this.columns.forEach((item, index) => {
|
|
|
|
|
+ this.columns[index].splice(_rowIndex + 1, 0, this.getInput());
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
},
|
|
},
|
|
|
//找到真正需要改变rowspan的行
|
|
//找到真正需要改变rowspan的行
|
|
|
getPreventRowspan(columnIndex, rowIndex) {
|
|
getPreventRowspan(columnIndex, rowIndex) {
|
|
@@ -204,7 +371,20 @@
|
|
|
item.splice(rowIndex, 1);
|
|
item.splice(rowIndex, 1);
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ getWidth(item) {
|
|
|
|
|
+ let width = Number(item.style.width) || 100;
|
|
|
|
|
+ if (item.colspanKey.length) {
|
|
|
|
|
+ this.columns.forEach((cell) => {
|
|
|
|
|
+ cell.forEach((row) => {
|
|
|
|
|
+ if (item.colspanKey.includes(row.id)) {
|
|
|
|
|
+ width += Number(row.style.width || 100);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ return width + 'px';
|
|
|
|
|
+ },
|
|
|
calculation() {
|
|
calculation() {
|
|
|
this.$emit('calculation');
|
|
this.$emit('calculation');
|
|
|
},
|
|
},
|
|
@@ -239,13 +419,39 @@
|
|
|
if (domObj.units) {
|
|
if (domObj.units) {
|
|
|
this.units[this.domId] = domObj.units;
|
|
this.units[this.domId] = domObj.units;
|
|
|
}
|
|
}
|
|
|
|
|
+ let dom = document.getElementById(domObj.id);
|
|
|
|
|
+
|
|
|
this.columns.forEach((item, index) => {
|
|
this.columns.forEach((item, index) => {
|
|
|
let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
|
|
let rowsIndex = item.findIndex((cells) => cells.id == this.domId);
|
|
|
|
|
+
|
|
|
if (rowsIndex >= 0) {
|
|
if (rowsIndex >= 0) {
|
|
|
|
|
+ let width = domObj.width - dom.parentElement.offsetWidth;
|
|
|
|
|
+ let newWidth = this.columns[index][rowsIndex].style.width + width;
|
|
|
|
|
+ this.columns[index][0].width = newWidth;
|
|
|
this.$set(this.columns[index], rowsIndex, domObj);
|
|
this.$set(this.columns[index], rowsIndex, domObj);
|
|
|
|
|
+ item.forEach((cell, _index) => {
|
|
|
|
|
+ this.$set(this.columns[index][_index].style, 'width', newWidth);
|
|
|
|
|
+ this.$set(this.columns[index][_index], 'width', newWidth);
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ onRightClick(PointerEvent, rowIndex, columnIndex) {
|
|
|
|
|
+ this.currentRowIndex = rowIndex;
|
|
|
|
|
+ this.currentColumnIndex = columnIndex;
|
|
|
|
|
+ if (rowIndex === 0) {
|
|
|
|
|
+ this.rightClickShow = true;
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ let y = PointerEvent.pageY;
|
|
|
|
|
+ let x = PointerEvent.pageX + 10;
|
|
|
|
|
+ if (PointerEvent.screenY >= PointerEvent.view.innerHeight) {
|
|
|
|
|
+ y -= 80;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$refs.popoverRef.$el.style.top = y + 'px';
|
|
|
|
|
+ this.$refs.popoverRef.$el.style.left = x + 'px';
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
inputClick(item, type) {
|
|
inputClick(item, type) {
|
|
|
if (!this.edit) {
|
|
if (!this.edit) {
|
|
@@ -257,14 +463,11 @@
|
|
|
this.$emit('editShow', {
|
|
this.$emit('editShow', {
|
|
|
templateDivRef: 'customTextRef' + this.id,
|
|
templateDivRef: 'customTextRef' + this.id,
|
|
|
domObj: {
|
|
domObj: {
|
|
|
|
|
+ ...item,
|
|
|
width: dom.parentElement.offsetWidth,
|
|
width: dom.parentElement.offsetWidth,
|
|
|
- isNoWidth: type == 'columns' ? false : true,
|
|
|
|
|
- id: item.id,
|
|
|
|
|
- readonly: item.readonly,
|
|
|
|
|
- value: item.value,
|
|
|
|
|
- rowspan: item.rowspan,
|
|
|
|
|
|
|
+ isNoWidth: type != 'columns' ? false : true,
|
|
|
equation: this.equation[item.id],
|
|
equation: this.equation[item.id],
|
|
|
- units: this.units[item.id]||{}
|
|
|
|
|
|
|
+ units: this.units[item.id] || {}
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -298,7 +501,6 @@
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
.column {
|
|
.column {
|
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
- width: 100px;
|
|
|
|
|
> div {
|
|
> div {
|
|
|
height: 30px;
|
|
height: 30px;
|
|
|
border: 1px solid #ddd;
|
|
border: 1px solid #ddd;
|
|
@@ -366,4 +568,10 @@
|
|
|
color: #409eff;
|
|
color: #409eff;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ .selection-box {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ border: 2px dashed black;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ pointer-events: none; /* 确保选择框不会干扰鼠标事件 */
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|