1.el-table可编辑。

src/components/EditableColumn/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-input
+    ref="inputRef"
+    v-if="isEditing"
+    v-model="data"
+    @keyup.enter="endEdit"
+    @blur="endEdit"
+  />
+  <div v-else @click="click">{{ data }}</div>
+</template>
+
+<script lang="ts" setup>
+import { useVModel } from "@vueuse/core";
+import type { ElInput } from "element-plus";
+
+const props = defineProps<{
+  modelValue: string;
+}>();
+const emit = defineEmits(["update:modelValue"]);
+
+const data = useVModel(props, "modelValue", emit);
+const isEditing = ref(false);
+
+const inputRef = ref<InstanceType<typeof ElInput>>();
+
+const click = () => {
+  isEditing.value = true;
+  nextTick(() => {
+    inputRef.value && inputRef.value.focus();
+  });
+};
+
+const endEdit = () => {
+  isEditing.value = false;
+};
+</script>
+
+<style scoped lang="scss"></style>

src/typings/components.d.ts

@@ -6,6 +6,7 @@
 export { }
 
 declare module 'vue' {
+  EditableColumn: typeof import('./../components/EditableColumn/index.vue')['default']
   ExcelUpload: typeof import('./../components/Upload/ExcelUpload.vue')['default']
   CommonTable: typeof import('./../components/CommonTable/index.vue')['default']
   AppLink: typeof import('./../components/AppLink/index.vue')['default']

src/views/demo/printDemo.vue

@@ -25,7 +25,11 @@
       :show-header="false"
       :row-class-name="tableRowClassName"
     >
-      <el-table-column fixed prop="date" label="Date" />
+      <el-table-column fixed prop="date" label="Date">
+        <template #default="scope">
+          <EditableColumn v-model="scope.row.date" />
+        </template>
+      </el-table-column>
       <el-table-column prop="name" label="Name" />
       <el-table-column prop="state" label="State" />
       <el-table-column prop="city" label="City" />
@@ -34,6 +38,8 @@
     </el-table>
     <div class="bottomBox">
       <div class="desc">特征和程度:</div>
+      <EditableColumn style="height: 50px; width: 100%" v-model="chengdu" />
+
       <div class="bl">是否首检:</div>
       <div class="br">检验员：（盖章）:</div>
     </div>
@@ -47,7 +53,9 @@ const toPrintRef = ref(null);
 
 // 2.调用方法传入ref
 const printClick = () => {
-  html2CanvasPrint(toPrintRef.value);
+  // console.log(tableData.value);
+  console.log(chengdu.value);
+  // html2CanvasPrint(toPrintRef.value);
 };
 
 const tableRowClassName = ({ row, rowIndex }) => {
@@ -57,7 +65,9 @@ const tableRowClassName = ({ row, rowIndex }) => {
   return "";
 };
 
-const tableData = [
+const chengdu = ref("");
+
+const tableData = ref([
   {
     date: "2016-05-03",
     name: "Tom",
@@ -90,7 +100,7 @@ const tableData = [
     address: "No. 189, Grove St, Los Angeles",
     zip: "CA 90036",
   },
-];
+]);
 </script>
 
 <style>