Auto Commit

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

package.json

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "element-plus": "^2.3.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+<!--
+ * @Author: chlg
+ * @Date: 2023-09-06 20:04:04
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2023-11-11 18:13:38
+ * @Description: 实现表格的可以编辑 
+-->
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <h2>表格单元格可以编辑</h2>
+  <a href="https://www.cnblogs.com/nicoz/p/17030470.html">参考1</a><br>
+  <a href="https://github.com/jiantou1001/CanEditGrid">参考2</a><br>
+  <a href="https://www.duidaima.com/Group/Topic/Vue/13697">参考3</a><br>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+  <div style="background-color: cadetblue; height: 600px">
+    <div class="regulaContainer">
+      <el-table
+        ref="tableRef"
+        :data="tableData"
+        border
+        style="width: 100%"
+        highlight-current-row
+        height="400"
+        :cell-style="rowStyleClass"
+        @cell-dblclick="handleCellDblclick"
+        @cell-mouse-leave="cellMouseLeave"
+      >
+        <el-table-column type="index" label="序号" width="100" />
+        <el-table-column prop="date" label="Date" width="180">
+          <template #default="scope">
+            <el-input
+              v-if="activeIndex == scope.$index && scope.column.label == activeLabel"
+              v-model="scope.row.date"
+            ></el-input>
+            <span v-else>{{ scope.row.date }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="180" >
+          <template #default="scope">
+            <el-input
+              v-if="activeIndex == scope.$index && scope.column.label == activeLabel"
+              v-model="scope.row.name"
+            ></el-input>
+            <span v-else>{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" label="Address" >
+          <template #default="scope">
+            <el-input
+              v-if="editCell(scope)"
+              v-model="scope.row.address"
+            ></el-input>
+            <span v-else>{{ scope.row.address }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script lang="ts" setup >
+import { getCurrentInstance, onMounted, reactive, ref, inject } from "vue";
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+const install = getCurrentInstance();
+const tableRef = ref();
+const tableData = reactive<any>([]);
+const activeIndex = ref(-1); //记录当前编辑的行号
+const activeLabel = ref(""); //记录当前编辑的列明
+//只判断行号的时候可以实现整行的编辑。
+//鼠标离开时重置条件
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+
+onMounted(() => {
+  for (let i = 0; i < 5; i++) {
+    let obj = {
+      date: "2016-05-01",
+      name: "Tom" + i,
+      address: "No. 189, Grove St, Los Angeles",
+      color_index: i,
+      rowIndex: i,
+    };
+    tableData.push(obj);
+  }
+});
+
+function editCell(scope)
+{
+  if (activeIndex.value == scope.$index && scope.column.label == activeLabel.value)
+  {
+    console.log("ooo")
+    return true; 
   }
+  return false;
+}
+
+function rowStyleClass(row) {
+  let style = {};
 
-  .logo {
-    margin: 0 2rem 0 0;
+  if (row.rowIndex % 2) {
+    style = {
+      color: "#fff",
+      borderBottom: "1px solid #EBEEF588",
+      //background: '#065D5F !important'
+    };
+
+    return style;
+  } else {
+    style = {
+      color: "#fff",
+      borderBottom: "1px solid #EBEEF588",
+      //background: '#065D5F !important'
+    };
+
+    return style;
   }
+}
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+function handleCellDblclick(row, column, cell)
+{
+  let columnindex = column.getColumnIndex();
+
+  if (columnindex > 0)
+  {
+      activeIndex.value = row.rowIndex;
+      activeLabel.value = column.label;
+
+  }
+  else
+  {
+     activeIndex.value = -1;
   }
+ 
+  
+  console.log("kk:", activeIndex.value,activeLabel.value);
+  //console.log(column.getColumnIndex(),column.label);
+}
+
+function cellMouseLeave()
+{
+  activeIndex.value = -1;
+  activeLabel.value = "";
+}
+
+</script> 
+
+
+<style>
+.regulaContainer {
+  background-color: cadetblue;
+}
+
+/* 表格整体背景色 */
+.regulaContainer .el-table,
+.regulaContainer .el-table__expanded-cell {
+  background-color: transparent;
+}
+
+/* 表格最下面的线 */
+.regulaContainer .el-table__inner-wrapper::before {
+  height: 0px;
+}
+
+.regulaContainer .el-table td.el-table__cell,
+.regulaContainer .el-table th.el-table__cell.is-leaf {
+  border: 0px;
+}
+
+.regulaContainer .el-table thead {
+  color: rgb(48, 43, 43);
+  background-color: rgb(4, 151, 145);
+  border: 0;
+}
+
+.regulaContainer .el-table th {
+  background: transparent;
+}
+
+/* 表格内tr背景色修改 */
+.regulaContainer .el-table tr {
+  background-color: transparent !important;
+  border: 1px;
+  /* 设置字体大小 */
+  font-size: 16px;
+  color: rgb(31, 27, 27);
+}
+
+/*表格内td背景色修改*/
+.regulaContainer .el-table td {
+  background-color: transparent !important;
+  border: 1px;
+  /* 设置字体大小 */
+  font-size: 16px;
+  color: #fff;
+}
+
+.regulaContainer .current-row {
+  /* 选中时的图片显示 */
+  background: rgb(26, 46, 161);
+  background-size: 100% 100% !important;
+}
+
+/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
+.regulaContainer .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: rgb(60, 10, 175) !important;
+  /* color: #f19944; */
+  /* 设置文字颜色，可以选择不设置 */
 }
 </style>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'  //支持中文
+
+
 import './assets/main.css'
+import 'element-plus/dist/index.css'
+
+
+const app = createApp(App);
+
+
+app.use(ElementPlus,{
+    locale: zhCn, //支持中文
+})
 
-createApp(App).mount('#app')
+app.mount('#app')