|
@@ -8,7 +8,9 @@
|
|
|
<el-button type="primary" @click="addRow(columns[0].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>
|
|
|
|
|
|
|
+ <el-checkbox v-model="isMerge" style="margin-left: 10px" v-if="edit"
|
|
|
|
|
+ >合并单元格</el-checkbox
|
|
|
|
|
+ >
|
|
|
<div class="table" style="margin-top: 10px" :id="id">
|
|
<div class="table" style="margin-top: 10px" :id="id">
|
|
|
<div
|
|
<div
|
|
|
class="table-body"
|
|
class="table-body"
|
|
@@ -66,7 +68,7 @@
|
|
|
<i
|
|
<i
|
|
|
class="el-icon-delete delete"
|
|
class="el-icon-delete delete"
|
|
|
style="display: none"
|
|
style="display: none"
|
|
|
- @click="removeColumn(item,index)"
|
|
|
|
|
|
|
+ @click="removeColumn(item, index)"
|
|
|
v-if="edit && rowIndex == 0"
|
|
v-if="edit && rowIndex == 0"
|
|
|
></i>
|
|
></i>
|
|
|
<i
|
|
<i
|
|
@@ -92,7 +94,7 @@
|
|
|
class="templateInput"
|
|
class="templateInput"
|
|
|
:id="item.id"
|
|
:id="item.id"
|
|
|
:ref="item.id + 'ref'"
|
|
:ref="item.id + 'ref'"
|
|
|
- :readonly="item.readonly == 2 || !edit"
|
|
|
|
|
|
|
+ :readonly="item.readonly == 2 || readonly"
|
|
|
@click="inputClick(item)"
|
|
@click="inputClick(item)"
|
|
|
@input="calculation"
|
|
@input="calculation"
|
|
|
autocomplete="off"
|
|
autocomplete="off"
|
|
@@ -104,7 +106,7 @@
|
|
|
class="templateInput"
|
|
class="templateInput"
|
|
|
:id="item.id"
|
|
:id="item.id"
|
|
|
:ref="item.id + 'ref'"
|
|
:ref="item.id + 'ref'"
|
|
|
- :readonly="item.readonly == 2 || !edit"
|
|
|
|
|
|
|
+ :readonly="item.readonly == 2 || readonly"
|
|
|
@click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
|
|
@click="inputClick(item, rowIndex == 0 ? 'columns' : null)"
|
|
|
@input="calculation"
|
|
@input="calculation"
|
|
|
type="text"
|
|
type="text"
|
|
@@ -130,6 +132,10 @@
|
|
|
edit: {
|
|
edit: {
|
|
|
default: true,
|
|
default: true,
|
|
|
type: Boolean
|
|
type: Boolean
|
|
|
|
|
+ },
|
|
|
|
|
+ readonly: {
|
|
|
|
|
+ default: false,
|
|
|
|
|
+ type: Boolean
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
@@ -169,15 +175,14 @@
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
startSelecting(event) {
|
|
startSelecting(event) {
|
|
|
- if(!this.isMerge){
|
|
|
|
|
- return
|
|
|
|
|
|
|
+ if (!this.isMerge) {
|
|
|
|
|
+ return;
|
|
|
}
|
|
}
|
|
|
this.isSelecting = true;
|
|
this.isSelecting = true;
|
|
|
this.startX = event.clientX;
|
|
this.startX = event.clientX;
|
|
|
this.startY = event.clientY;
|
|
this.startY = event.clientY;
|
|
|
this.endX = this.startX;
|
|
this.endX = this.startX;
|
|
|
this.endY = this.startY;
|
|
this.endY = this.startY;
|
|
|
- console.log(this.startX, this.startY, this.endX, this.endY);
|
|
|
|
|
},
|
|
},
|
|
|
updateSelection(event) {
|
|
updateSelection(event) {
|
|
|
if (this.isSelecting) {
|
|
if (this.isSelecting) {
|
|
@@ -219,7 +224,7 @@
|
|
|
let rowspan = this.selectedItems
|
|
let rowspan = this.selectedItems
|
|
|
.filter((item) => item.columnIndex === _columnIndex)
|
|
.filter((item) => item.columnIndex === _columnIndex)
|
|
|
.reduce((acc, cur) => acc + cur.rowspan, 0);
|
|
.reduce((acc, cur) => acc + cur.rowspan, 0);
|
|
|
- if (this.verify(_colspan, rowspan, this.selectedItems)) {
|
|
|
|
|
|
|
+ if (this.verify(_colspan, rowspan, this.selectedItems, _rowIndex)) {
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
for (let index = 0; index < this.selectedItems.length; index++) {
|
|
for (let index = 0; index < this.selectedItems.length; index++) {
|
|
@@ -256,13 +261,20 @@
|
|
|
colspanSum(rowIndex) {
|
|
colspanSum(rowIndex) {
|
|
|
return this.selectedItems.filter((item) => item.rowIndex == 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');
|
|
|
|
|
-
|
|
|
|
|
|
|
+ verify(_colspan, _rowspan, arr, _rowIndex) {
|
|
|
for (let index = 0; index < arr.length; index++) {
|
|
for (let index = 0; index < arr.length; index++) {
|
|
|
let item = arr[index];
|
|
let item = arr[index];
|
|
|
|
|
+ if (_rowIndex === 0 && _rowIndex != item.rowIndex) {
|
|
|
|
|
+ //表头不能和其他行合并
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (
|
|
|
|
|
+ item.rowIndex != this.selectedItems[0].rowIndex &&
|
|
|
|
|
+ _colspan > this.colspanSum(item.rowIndex).length &&
|
|
|
|
|
+ item.colspan != 0
|
|
|
|
|
+ ) {
|
|
|
|
|
+ return true;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
if (item.rowspan > _rowspan) {
|
|
if (item.rowspan > _rowspan) {
|
|
|
return true;
|
|
return true;
|
|
@@ -305,18 +317,72 @@
|
|
|
id: generateRandomString(5)
|
|
id: generateRandomString(5)
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
|
|
+ getIndex(id) {
|
|
|
|
|
+ let columnIndex, rowIndex;
|
|
|
|
|
+ console.log(id);
|
|
|
|
|
+ this.columns.forEach((cell, _columnIndex) => {
|
|
|
|
|
+ let cellIndex = cell.findIndex((data) => data.id == id);
|
|
|
|
|
+ if (cellIndex != '-1') {
|
|
|
|
|
+ columnIndex = _columnIndex;
|
|
|
|
|
+ rowIndex = cellIndex;
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ return { columnIndex, rowIndex };
|
|
|
|
|
+ },
|
|
|
|
|
|
|
|
// 方法:删除指定列
|
|
// 方法:删除指定列
|
|
|
- removeColumn(item,index) {
|
|
|
|
|
-
|
|
|
|
|
- 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);
|
|
|
|
|
|
|
+ removeColumn(item, index) {
|
|
|
|
|
+ this.columns[index].forEach((cell, rowIndex) => {
|
|
|
|
|
+ if (cell.colspanKey.length) {
|
|
|
|
|
+ //当前删除的列其他行有合并过单元格的处理
|
|
|
|
|
+ let data = this.columns[index + 1][rowIndex];
|
|
|
|
|
+
|
|
|
|
|
+ data.colspan = cell.colspan - 1;
|
|
|
|
|
+ data.rowspan = cell.rowspan;
|
|
|
|
|
+ data.style = cell.style;
|
|
|
|
|
+ data.colspanKey = cell.colspanKey.filter((item) => item != data.id);
|
|
|
|
|
+ if (data.rowspan > 1) {
|
|
|
|
|
+ for (let j = 1; j < data.rowspan; j++) {
|
|
|
|
|
+ this.$set(this.columns[index + 1][rowIndex + j], 'rowspan', 0);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
+ this.$set(this.columns[index + 1], rowIndex, data);
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
|
|
+ if (item?.colspanKey.length) {
|
|
|
|
|
+ item.colspanKey.forEach((id) => {
|
|
|
|
|
+ let { columnIndex } = this.getIndex(id);
|
|
|
|
|
+ console.log(columnIndex, 'columnIndex');
|
|
|
|
|
+
|
|
|
|
|
+ this.columns[columnIndex].forEach((cell, rowIndex) => {
|
|
|
|
|
+ if (cell.colspanKey.length) {
|
|
|
|
|
+ //当前删除的列其他行有合并过单元格的处理
|
|
|
|
|
+ let data = this.columns[columnIndex + 1][rowIndex];
|
|
|
|
|
+
|
|
|
|
|
+ data.colspan = cell.colspan - 1;
|
|
|
|
|
+ data.rowspan = cell.rowspan;
|
|
|
|
|
+ data.style = cell.style;
|
|
|
|
|
+ data.colspanKey = cell.colspanKey.filter(
|
|
|
|
|
+ (item) => item != data.id
|
|
|
|
|
+ );
|
|
|
|
|
+ if (data.rowspan > 1) {
|
|
|
|
|
+ for (let j = 1; j < data.rowspan; j++) {
|
|
|
|
|
+ this.$set(
|
|
|
|
|
+ this.columns[columnIndex + 1][rowIndex + j],
|
|
|
|
|
+ 'rowspan',
|
|
|
|
|
+ 0
|
|
|
|
|
+ );
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$set(this.columns[columnIndex + 1], rowIndex, data);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ this.columns.splice(index + 1, 1);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ this.columns.splice(index, 1);
|
|
|
|
|
+ //当前删除的列合并过单元格的列都删除
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
// 方法:添加新行
|
|
// 方法:添加新行
|