feat: update table insert

src/components/CodemirrorEditor/insertForm.vue

@@ -1,75 +1,128 @@
 <template>
-    <el-dialog title="插入表格" class="insert__dialog" :visible="dialogFormVisible" @close="$emit('close')">
+  <el-dialog
-        <el-form class="insert__form" :model="config.form">
+    title="插入表格"
-            <el-form-item label="行数(表头不计入行数)">
+    class="insert__dialog"
-            <el-input v-model="config.form.rows"></el-input>
+    :visible="dialogFormVisible"
-            </el-form-item>
+    @close="$emit('close')"
-            <el-form-item label="列数">
+    border
-            <el-input v-model="config.form.cols"></el-input>
+  >
-            </el-form-item>
+    <el-row class="tb-options" type="flex" align="middle" :gutter="10">
-        </el-form>
+      <el-col :span="6">
-        <div slot="footer" class="dialog-footer">
+        行：
-            <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+        <el-input-number
-            <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
+          v-model="rowNum"
-        </div>
+          controls-position="right"
-    </el-dialog>
+          @change="handleChange($event,'row')"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+      <el-col :span="6">
+        列：
+        <el-input-number
+          v-model="colNum"
+          controls-position="right"
+          @change="handleChange($event,'col')"
+          :min="1"
+          :max="100"
+          size="small"
+        ></el-input-number>
+      </el-col>
+    </el-row>
+    <!--  -->
+    <table style="border-collapse: collapse">
+      <tr :class="{ 'head-style': row===1 }" v-for="row in rowNum+1" :key="row">
+        <td v-for="col in colNum" :key="col">
+          <el-input
+            align="center"
+            v-model="tableData[`k_${row-1}_${col-1}`]"
+            :placeholder="row===1?'表头':''"
+          />
+        </td>
+      </tr>
+    </table>
+    <!--  -->
+    <div slot="footer" class="dialog-footer">
+      <el-button :type="btnType" plain @click="$emit('close')">取 消</el-button>
+      <el-button :type="btnType" @click="insertTable" plain>确 定</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
-import config from '../../assets/scripts/config'
+import config from "../../assets/scripts/config";
-import {mapState, mapMutations} from 'vuex';
+import { mapState, mapMutations } from "vuex";
 export default {
-    props: {
+  props: {
-        dialogFormVisible: {
+    dialogFormVisible: {
-            type: Boolean,
+      type: Boolean,
-            default: false
+      default: false
-        }
-    },
-    data() {
-        return {
-            config: config
-        }
-    },
-    computed: {
-        btnType() {
-            return !this.nightMode ? 'success' : 'default';
-        },
-        ...mapState({
-            nightMode: state=> state.nightMode,
-            editor: state=> state.editor
-        })
-    },
-    methods: {
-        // 插入表格
-        insertTable() {
-            const cursor = this.editor.getCursor()
-            const rows = parseInt(this.config.form.rows)
-            const cols = parseInt(this.config.form.cols)
-            if (isNaN(rows) || isNaN(cols) || rows < 1 || cols < 1) {
-                this.$message({
-                    showClose: true,
-                    message: '输入的行/列数无效，请重新输入',
-                    type: 'error'
-                })
-                return
-            }
-
-            let table = ''
-            for (let i = 0; i < rows + 2; ++i) {
-                for (let j = 0; j < cols + 1; ++j) {
-                    table += (j === 0 ? '|' : (i !== 1 ? '     |' : ' --- |'))
-                }
-                table += '\n'
-            }
-
-            this.editor.replaceSelection(`\n${table}\n`, cursor)
-            this.$emit('close')
-            this.editorRefresh()
-        },
-        ...mapMutations(['editorRefresh'])
     }
-}
+  },
+  data() {
+    return {
+      config: config,
+      rowNum: 1,
+      colNum: 1,
+      tableData: {}
+    };
+  },
+  computed: {
+    btnType() {
+      return !this.nightMode ? "success" : "default";
+    },
+    ...mapState({
+      nightMode: state => state.nightMode,
+      editor: state => state.editor
+    })
+  },
+  methods: {
+    // 插入表格
+    insertTable() {
+      const cursor = this.editor.getCursor();
+      const rows = this.rowNum;
+      const cols = this.colNum;
+
+      let table = "";
+      let currRow = [];
+      for (let i = 0; i < rows + 2; ++i) {
+        table += "|";
+        currRow = [];
+        for (let j = 0; j < cols; ++j) {
+          let rowIdx = i;
+          if (i > 1) {
+            rowIdx = i - 1;
+          }
+
+          i === 1
+            ? currRow.push("---")
+            : currRow.push(
+                this.tableData[`k_${rowIdx}_${j}`]
+                  ? this.tableData[`k_${rowIdx}_${j}`]
+                  : ""
+              );
+        }
+        table += currRow.join("|");
+        table += "|\n";
+      }
+
+      this.editor.replaceSelection(`\n${table}\n`, cursor);
+      this.$emit("close");
+      this.editorRefresh();
+    },
+    ...mapMutations(["editorRefresh"]),
+    handleChange(val, type) {}
+  }
+};
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
-</style>
+.tb-options {
+  margin-bottom: 20px;
+}
+
+.head-style .el-input__inner {
+  background-color: #f2f2f2;
+}
+</style>