vue + element table 增加行，删除行

项目中对表格内容进行编辑的时候会需要创建一行，或者删除一行，其实原理就是向表格数据中添加一个新对象，或者删除一个对应的对象，因为渲染表格数据来源一个数组，所以其实就是对数组的操作。

就像上图，可以创建一行，或者选择删除当前行，HTML代码如下：

<el-dialog
      :title="DialogTextMap[DialogStatus]"
      :visible.sync="updateDialogShow"
      :close-on-click-modal="false"
      :before-close="cancelCreate"
      custom-class="regionDialog"
    >
      <el-button
        :disabled="diaTable.length > 8 ? true : false"
        type="primary"
        :style="theme.sysTheme.styleLevel3"
        @click="createRow"
        style="float: right; margin-bottom: 10px"
        >创建一行</el-button
      >
      <el-table :data="diaTable" style="width:100%; " stripe border>
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column
          label="考核项"
          align="center"
          prop="assessCodeName"
          width="220"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.accessCode"
              @change="assessNameChange(scope.row)"
              placeholder="请选择"
            >
              <el-option
                v-for="item in scoringSeleData"
                :key="item.code"
                :label="item.jhiValue"
                :value="item.code"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="计分标准" align="center" prop="accessNameCode">
          <template slot-scope="scope">{{ scope.row.accessNameCode }}</template>
        </el-table-column>
        <el-table-column label="分值" align="center" prop="score">
          <template slot-scope="scope">
            <el-select v-model="scope.row.score" placeholder="请选择">
              <el-option
                v-for="item in scoreArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="附加规则"
          align="center"
          width="200"
          prop="additionalRule"
        >
          <template slot-scope="scope">
            <el-select
              v-if="scope.row.ruleType === 1"
              v-model="scope.row.additionalRule"
              placeholder="请选择"
              style="width: 160px"
            >
              <el-option
                v-for="item in heightScore"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span v-else-if="scope.row.ruleType === 0">--</span>
            <el-select
              v-else
              v-model="scope.row.additionalRule"
              placeholder="请选择"
              style="width: 160px"
            >
              <el-option
                v-for="item in lowScore"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button
          type="primary"
          :style="theme.sysTheme.styleLevel3"
          @click="cancelCreate()"
          >取 消</el-button
        >
        <el-button
          type="primary"
          :style="theme.sysTheme.styleLevel3"
          @click="confirmCreate('addForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

数组diaTable为接口请求数据，创建一行就是像diaTable中添加一个对象：

createRow() {
      // 创建行
      if (this.diaTable.length >= 6) { // 判断当前表格是否可继续创建
        this.$message({
          message: "超出考核项种类数量，无法创建",
          type: "info",
          duration: 2000
        });
        return false;
      }
      var list = {
        accessCode: "",
        additionalRule: "",
        assessName: "",
        assessType: this.queryform.assessType, // 当前数据需要发送到后台保存，需要设置默认值
        id: "",
        orderNum: this.diaTable.length + 1, // orderNum为新创建行的索引
        ruleType: "",
        score: "",
        assessCodeName: "",
        accessNameCode: ""
      };
      this.diaTable.push(list); 
    }

删除行，我这里做了接口调用，真实删除当前行数据，如下：

handleDelete(val, row) {
      // 模态框删除按钮
      this.$confirm("是否确认删除本条数据，删除后不可恢复?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        // 此为假删除，只是删除了模态框中当前行的数据，并没有真正删除表格数据
        this.diaTable.splice(val, 1);
        // 如下，接口请求则真正删除表格数据
        let rowId = row.id;
        regionactivityapi.DeleteAssess({ id: rowId }).then(res => {
          if (res.data) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          }
        });
      });
    }