add sidebar function
This commit is contained in:
parent
091bc916cf
commit
edd3ce61b4
@ -1,28 +1,67 @@
|
||||
<template>
|
||||
<div class='main'>
|
||||
<div class='empty'></div>
|
||||
<div class='content'>
|
||||
|
||||
<table>
|
||||
<tr v-for="row in rows" :key="row.rowId" :cells="row.cells" v-bind:class="{active:row.rowId==selectedRow}">
|
||||
<input type="button" :value='row.rowId' @click="rowClickHandler(row.rowId)">
|
||||
<reportCell v-for="cell in row.cells" :cell="cell" v-on:cellIdFromChild="getCellFromChildren" :key="cell.cellId"></reportCell>
|
||||
<tr>
|
||||
<input class='row-counter' type="button" value="行0">
|
||||
|
||||
<td class='cell-counter' v-for="cell in initialCells">{{cell.title}}</td>
|
||||
</tr>
|
||||
<tr v-for="row in rows" :key="row.rowId" :cells="row.cells" v-bind:class="{active:row.rowId===selectedRow}">
|
||||
<input class='row-counter' type="button" :value='row.rowId' @click="rowClickHandler(row)">
|
||||
|
||||
<reportCell v-for="cell in row.cells" :cell="cell" v-on:cellIdFromChild="getCellFromChildren" :key="cell.cellId" v-bind:class="{active:cell.cellId===selectedCell}"></reportCell>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class='side'>
|
||||
<div>
|
||||
<span>
|
||||
<strong>现在列:</strong>
|
||||
</span>{{selectedRow}}
|
||||
<span>
|
||||
<strong>现在行:</strong>
|
||||
</span>{{selectedCell}}
|
||||
|
||||
</div>
|
||||
<div class='row-tool'>
|
||||
<button @click="addRow">添加行</button>
|
||||
<button @click="deleteRow">删除行</button>
|
||||
|
||||
</div>
|
||||
<div class='td-tool'>
|
||||
<button @click="addCell(selectedRow)">添加列</button>
|
||||
<button @click="deleteCell(selectedCell)">删除列</button>
|
||||
</div>
|
||||
<div>
|
||||
<label>表头:</label><input type="text" v-model="inputTitle"></div>
|
||||
<button @click="submitInput">确定</button>
|
||||
<label>表头:</label><input type="text" v-model="inputTitle"><br>
|
||||
|
||||
{{infos}}
|
||||
<label>宽度:</label><input type="number" v-model="inputColspan"><br>
|
||||
|
||||
<label>高度:</label><input type="number" v-model="inputHeight"><br>
|
||||
<label>字体大小:</label><input type="number" v-model="fontSize"><br>
|
||||
|
||||
<label>字体样式:</label>
|
||||
<input type="radio" id="styleone" value="normal" v-model="fontStyle">
|
||||
<label for="styleone">正常</label>
|
||||
|
||||
<input type="radio" id="styletwo" value="bold" v-model="fontStyle">
|
||||
<label for="styletwo">加粗</label>
|
||||
<br>
|
||||
|
||||
<label>字体位置:</label>
|
||||
<input type="radio" id="one" value="left" v-model="textAlign">
|
||||
<label for="one">居左</label>
|
||||
|
||||
<input type="radio" id="two" value="center" v-model="textAlign">
|
||||
<label for="two">居中</label>
|
||||
<input type="radio" id="three" value="right" v-model="textAlign">
|
||||
<label for="three">居右</label>
|
||||
<br>
|
||||
<button @click="undoHandler">undo</button>
|
||||
</div>
|
||||
{{inputColspan}} {{infos}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -33,30 +72,42 @@ import reportCell from './reportCell.vue';
|
||||
const infosFormat: Array<{
|
||||
rowId: string;
|
||||
cells: Array<{ cellId: number; title: string }>;
|
||||
}> = [
|
||||
{
|
||||
rowId: '行0',
|
||||
cells: [
|
||||
{ cellId: 1, title: '列1' },
|
||||
{ cellId: 2, title: '列2' },
|
||||
{ cellId: 3, title: '列3' },
|
||||
{ cellId: 4, title: '列4' },
|
||||
{ cellId: 5, title: '列5' },
|
||||
{ cellId: 6, title: '列6' },
|
||||
{ cellId: 7, title: '列7' },
|
||||
{ cellId: 8, title: '列8' },
|
||||
{ cellId: 9, title: '列9' },
|
||||
{ cellId: 10, title: '列10' },
|
||||
{ cellId: 11, title: '列11' },
|
||||
{ cellId: 12, title: '列12' },
|
||||
],
|
||||
},
|
||||
];
|
||||
const selectedRowFormat: string = '';
|
||||
const selectedCellFormat: number = 0;
|
||||
}> = [];
|
||||
const selectedRowFormat: number = 0;
|
||||
const selectedCellFormat: number = 9000;
|
||||
const inputTitleFormat: string = '';
|
||||
const inputColspanFormat: number = 0;
|
||||
const initialCellsFormat: Array<{ cellId: number; title: string }> = [
|
||||
{ cellId: 1, title: '1' },
|
||||
{ cellId: 2, title: '2' },
|
||||
{ cellId: 3, title: '3' },
|
||||
{ cellId: 4, title: '4' },
|
||||
{ cellId: 5, title: '5' },
|
||||
{ cellId: 6, title: '6' },
|
||||
{ cellId: 7, title: '7' },
|
||||
{ cellId: 8, title: '8' },
|
||||
{ cellId: 9, title: '9' },
|
||||
{ cellId: 10, title: '10' },
|
||||
{ cellId: 11, title: '11' },
|
||||
{ cellId: 12, title: '12' },
|
||||
{ cellId: 13, title: '13' },
|
||||
{ cellId: 14, title: '14' },
|
||||
{ cellId: 15, title: '15' },
|
||||
{ cellId: 16, title: '16' },
|
||||
{ cellId: 17, title: '17' },
|
||||
{ cellId: 18, title: '18' },
|
||||
{ cellId: 19, title: '19' },
|
||||
{ cellId: 20, title: '20' },
|
||||
{ cellId: 21, title: '21' },
|
||||
{ cellId: 22, title: '22' },
|
||||
{ cellId: 23, title: '23' },
|
||||
{ cellId: 24, title: '24' },
|
||||
];
|
||||
let rowId = 0;
|
||||
let cellId = 9000;
|
||||
let initialInputColspan = 0;
|
||||
let initialInputHeight = 30;
|
||||
let pointer = 0;
|
||||
export default Vue.extend({
|
||||
components: { reportCell },
|
||||
data() {
|
||||
@ -65,20 +116,55 @@ export default Vue.extend({
|
||||
selectedRow: selectedRowFormat,
|
||||
selectedCell: selectedCellFormat,
|
||||
inputTitle: inputTitleFormat,
|
||||
inputColspan: inputColspanFormat,
|
||||
inputHeight: initialInputHeight,
|
||||
initialCells: initialCellsFormat,
|
||||
textAlign: '',
|
||||
fontSize: '',
|
||||
fontStyle: '',
|
||||
recordHistory: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rows(): Array<{
|
||||
rowId: string;
|
||||
cells: Array<{ cellId: number; title: string }>;
|
||||
}> {
|
||||
rows(): any {
|
||||
// Array<{rowId: string;cells: Array<{ cellId: number; title: string }>;}>
|
||||
for (const row of this.infos) {
|
||||
for (const cellIndex in row.cells) {
|
||||
if (row.cells[cellIndex].cellId === this.selectedCell) {
|
||||
row.cells.splice(Number(cellIndex), 1, {
|
||||
title: this.inputTitle,
|
||||
colspan: this.inputColspan,
|
||||
cellId: this.selectedCell,
|
||||
height: this.inputHeight,
|
||||
textAlign: this.textAlign,
|
||||
fontSize: this.fontSize,
|
||||
fontStyle: this.fontStyle,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.recordHistory.push(JSON.parse(JSON.stringify(this.infos)));
|
||||
pointer += 1;
|
||||
|
||||
return this.infos;
|
||||
},
|
||||
styled() {},
|
||||
},
|
||||
methods: {
|
||||
getCellFromChildren(cell: { cellId: number; title: string }): void {
|
||||
getCellFromChildren(cell: {
|
||||
cellId: number;
|
||||
title: string;
|
||||
colspan: number;
|
||||
height: number;
|
||||
}): void {
|
||||
this.selectedCell = cell.cellId;
|
||||
this.inputTitle = cell.title;
|
||||
this.inputColspan = cell.colspan;
|
||||
this.inputHeight = cell.height;
|
||||
this.textAlign = cell.textAlign;
|
||||
this.fontSize = cell.fontSize;
|
||||
this.fontStyle = cell.fontStyle;
|
||||
},
|
||||
addRow() {
|
||||
this.infos.push({
|
||||
@ -92,7 +178,15 @@ export default Vue.extend({
|
||||
addCell(id: string) {
|
||||
for (const row of this.infos) {
|
||||
if (id === row.rowId) {
|
||||
row.cells.push({ cellId: (cellId += 1), title: '列' + cellId });
|
||||
row.cells.push({
|
||||
cellId: (cellId += 1),
|
||||
title: '列' + cellId,
|
||||
colspan: initialInputColspan,
|
||||
height: initialInputHeight,
|
||||
textAlign: 'center',
|
||||
fontSize: '16',
|
||||
fontStyle: 'normal',
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -105,22 +199,26 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
},
|
||||
submitInput() {
|
||||
for (const row of this.infos) {
|
||||
for (const cellIndex in row.cells) {
|
||||
if (row.cells[cellIndex].cellId === this.selectedCell) {
|
||||
row.cells.splice(Number(cellIndex), 1, {
|
||||
title: this.inputTitle,
|
||||
cellId: this.selectedCell.toString(),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
rowClickHandler(id: string): void {
|
||||
this.selectedRow = id;
|
||||
// <button @click="updateUserInput">更新</button>
|
||||
// updateUserInput() {
|
||||
// for (const row of this.infos) {
|
||||
// for (const cellIndex in row.cells) {
|
||||
// if (row.cells[cellIndex].cellId === this.selectedCell) {
|
||||
// row.cells.splice(Number(cellIndex), 1, {
|
||||
// title: this.inputTitle,
|
||||
// colspan: this.inputColspan,
|
||||
// cellId: this.selectedCell,
|
||||
// height: this.inputHeight,
|
||||
// textAlign: this.textAlign,
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
rowClickHandler(row): void {
|
||||
this.selectedRow = row.rowId;
|
||||
},
|
||||
undoHandler() {},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@ -129,37 +227,56 @@ export default Vue.extend({
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
.content {
|
||||
width: 70%;
|
||||
.empty {
|
||||
width: 3%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 77%;
|
||||
}
|
||||
|
||||
.side {
|
||||
background-color: lightgray;
|
||||
height: 300px;
|
||||
width: 30%;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
|
||||
margin-top: 22px;
|
||||
border: 1px black solid;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
text-align: center;
|
||||
// text-align: center;
|
||||
tr {
|
||||
border: 1px black solid;
|
||||
}
|
||||
.row-counter {
|
||||
position: relative;
|
||||
left: -59px;
|
||||
border: 1px black solid;
|
||||
background-color: lightblue;
|
||||
width: 58px;
|
||||
height: 30px;
|
||||
}
|
||||
.cell-counter {
|
||||
border: 1px black solid;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 8.3%;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
width: 100%;
|
||||
background-color: blue;
|
||||
background-color: lightgray;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
/*
|
||||
row.cells.splice(cell, 1, {
|
||||
cellId: 666,
|
||||
title: this.inputTitle,
|
||||
});
|
||||
|
||||
*/
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<td colspan="2" v-on:click="$emit('cellIdFromChild',cell)">{{title}} </td>
|
||||
<td :style="'height:'+cell.height+'px;text-align:'+cell.textAlign+';font-size:'+cell.fontSize+'px;font-weight:'+cell.fontStyle" :colspan="cell.colspan" v-on:click="$emit('cellIdFromChild',cell)">
|
||||
<span>{{cell.title}}</span>
|
||||
|
||||
</td>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
@ -7,9 +10,7 @@ import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['cell'],
|
||||
data() {
|
||||
return {
|
||||
title: this.cell.title,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user