From 0a465050c773d8b420f2b99d598de3d5dc9aef2b Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 17 五月 2024 15:45:28 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/content/components/customTable.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 108 insertions(+), 0 deletions(-)
diff --git a/src/books/content/components/customTable.vue b/src/books/content/components/customTable.vue
new file mode 100644
index 0000000..067d416
--- /dev/null
+++ b/src/books/content/components/customTable.vue
@@ -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>
--
Gitblit v1.9.1