优化通用表格添加、删除行方法

src/utils/table.js

@@ -126,52 +126,72 @@ export default {
     return spans
   },
   /**
-     *  添加行
-     * @param tableData$refs  表
-     * @param row 默认行数据，如果C1为true，那么则将C1的数值转换为索引值；如果不给则默认为{}
-     */
-  addRow(tableData$refs, row) {
+   *  添加行
+   * @param tableData$refs  表
+   * @param row 默认行数据，如果C1为true，那么则将C1的数值转换为索引值；如果不给则默认为{}
+   * @param indexColumn  序号的字段
+   */
+  addRow(tableData$refs, row, indexColumn) {
     if (!row) { // 如果没有给出每行默认值时
       row = {}
     }
-    row.index = tableData$refs.data.length
-    if (row.C1) {
-      tableData$refs.columns.some((v) => {
-        if (v.property && v.type === 'index') {
-          row[v.property] = tableData$refs.data.length + 1
-          return true
-        }
-      })
+
+    // 序号
+    const index = tableData$refs.data.length + 1
+
+    // 如果存在index列，则将index列按排序生成，从1开始数
+    tableData$refs.columns.some((v) => {
+      if (v.property && v.type === 'index') {
+        row.index = index
+        return true
+      }
+    })
+    // 如果存在序号字段，则将序号按排序生成，从1开始数
+    if (indexColumn) {
+      row[indexColumn] = index
     }
+
     tableData$refs.data.push(row)
     setTimeout(() => {
       tableData$refs.setCurrentRow(row)
     }, 10) // 用于延时渲染后选中这行
   },
   /**
-       *  删除行（需要保证每一行都有一个index属性）
-       *  建议使用方法：index列要有这个属性 :index="indexMethod"
-       *  建议方法内容：
-       *  indexMethod(index) {
-            this.tableData[index].index = index
-            return (index + 1)
-          }
-       * @param tableData$refs  表
-       */
-  delRow(tableData$refs) {
+   *  删除行
+   * @param tableData$refs  表
+   * @param indexColumn  序号的字段
+   */
+  delRow(tableData$refs, indexColumn) {
     if (tableData$refs.selection.length === 0) {
       Vue.prototype.$message({
         message: '请选中需要删除的数据！',
         type: 'error'
       })
     } else {
+      // 删除选中的行
       for (let i = 0; i < tableData$refs.selection.length; i++) {
         const index = tableData$refs.data.indexOf(tableData$refs.selection[i])
         tableData$refs.data.splice(index, 1)
       }
-      for (let i = 0; i < tableData$refs.data.length; i++) {
-        tableData$refs.data[i].index = i + 1
+
+      // 如果存在index列，则将index列按排序生成，从1开始数
+      tableData$refs.columns.some((v) => {
+        if (v.property && v.type === 'index') {
+          for (let i = 0; i < tableData$refs.data.length; i++) {
+            tableData$refs.data[i].index = i + 1
+          }
+          return true
+        }
+      })
+
+      // 如果存在序号字段，则将序号按排序生成，从1开始数
+      if (indexColumn) {
+        for (let i = 0; i < tableData$refs.data.length; i++) {
+          tableData$refs.data[i][indexColumn] = i + 1
+        }
       }
+
+      // 清除选中状态
       tableData$refs.clearSelection()
     }
   }

src/views/ysjl/3000/dj/common/table.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <div class="searchBox">
-      <el-button type="primary" @click="tableJs.addRow($refs.fubiao)">
+      <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="tableJs.addRow($refs.fubiao, false)">
         新增
       </el-button>
-      <el-button type="danger" @click="tableJs.delRow($refs.fubiao)">
+      <el-button type="danger" size="mini" icon="el-icon-remove-outline" @click="tableJs.delRow($refs.fubiao, false)">
         删除
       </el-button>
     </div>
@@ -13,7 +13,6 @@
       ref="fubiao"
       :data.sync="tableData"
       border
-      style="width: 100%"
     >
       <el-table-column
         type="selection"