testbookLayout.git

New file
			@@ -0,0 +1,108 @@
			<template>
			<table>
			<thead>
			<tr>
			<th class="time">时间</th>
			<th class="name">保育机构名称</th>
			<th class="special">特点</th>
			</tr>
			</thead>
			<tbody>
			<tr>
			<td>1949年以前</td>
			<td><input class="inputItem" type="text" /></td>
			<td><input class="inputItem" type="text" /></td>
			</tr>
			<tr>
			<td>1949-1980年</td>
			<td><input class="inputItem" type="text" /></td>
			<td><input class="inputItem" type="text" /></td>
			</tr>
			<tr>
			<td>1980-1990年</td>
			<td><input class="inputItem" type="text" /></td>
			<td><input class="inputItem" type="text" /></td>
			</tr>
			<tr>
			<td>1990-2000年</td>
			<td><input class="inputItem" type="text" /></td>
			<td><input class="inputItem" type="text" /></td>
			</tr>
			<tr>
			<td>2000年</td>
			<td><input class="inputItem" type="text" /></td>
			<td><input class="inputItem" type="text" /></td>
			</tr>
			</tbody>
			</table>
			</template>

			<script>
			export default {
			data() {
			return {
			tableData: [
			{ name: "John", age: 30, address: "New York" },
			{ name: "Jane", age: 25, address: "Los Angeles" },
			{ name: "Doe", age: 40, address: "Chicago" },
			],
			editIndex: -1,
			editedRow: {},
			};
			},
			methods: {
			handleRowClick(row, event, column) {
			if (this.editIndex === column) {
			// 如果点击的是已经编辑的行，则不做任何操作
			return;
			}
			this.editIndex = column;
			// 克隆当前行的数据，以便编辑时可以取消修改
			this.editedRow = { ...row };
			},
			handleEdit(index, row) {
			// 编辑按钮点击事件
			this.editIndex = index;
			this.editedRow = { ...row };
			},
			handleSave(index) {
			// 保存编辑内容
			this.tableData[index] = { ...this.editedRow };
			this.editIndex = -1;
			},
			handleCancel() {
			// 取消编辑
			this.editIndex = -1;
			},
			},
			};
			</script>
			<style scoped>
			table {
			border-collapse: collapse;
			width: 100%;
			}

			.time {
			width: 150px;
			}

			th,
			td {
			border: 1px solid #ddd;
			padding: 5px;
			text-align: center;
			box-sizing: border-box;
			}

			.inputItem {
			width: 90%;
			height: 32px;
			border: 0;
			font-size: 18px;
			}

			th {
			background-color: #f49a4c;
			}
			</style>