<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>
|
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>
|
