vue+elementUI对于table表格进行新增，修改，删除

标题

1. 在table表格进行操作新增，删除，修改。若必填项未填

如下图所示需要的效果

代码在这里插入代码片

<template>
  <el-dialog
    :title="$i18ns('EnumManagement')"
    :visible.sync="addEnumItemVisilable"
    v-if="addEnumItemVisilable"
    :before-close="handleClose"
    width="50%"
    append-to-body
  >
    <div class="addEnumItemDialog">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="Add" plain>{{
            $i18ns("新增")
          }}</el-button>
          <el-form-item>
            <el-button type="primary" @click="Delete" plain>{{
              $i18ns("删除")
            }}</el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="light"
        border
        style="width: 100%"
        :header-cell-style="{ background: 'inherit!important' }"
        align="left"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- 固定字段 -->
        <el-table-column
          prop="enumItemId"
          :label="$i18ns('枚举项代码')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-if="
                clickRowFlags[scope.$index] &&
                scope.row.index < modifyIndex[pageNum - 1]
              "
              v-model="scope.row.enumItemId"
              size="mini"
              @change="changeCode(scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.enumItemId }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enumItemName"
          :label="$i18ns('枚举项名称')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-if="clickRowFlags[scope.$index]"
              v-model="scope.row.enumItemName"
              size="mini"
              @change="changeCode(scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.enumItemName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="dscpMsg"
          :label="$i18ns('描述')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-input
              v-if="clickRowFlags[scope.$index]"
              v-model="scope.row.dscpMsg"
              size="mini"
              @change="changeCode(scope.row)"
            ></el-input>
            <span v-else>{{ scope.row.dscpMsg }}</span>
          </template>
        </el-table-column>
      </el-table>
      <my-pagination
        :pageNum="pageNum"
        :pageSize="pageSize"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">{{ $i18ns("保存") }}</el-button>
      <el-button @click="handleClose">{{ $i18ns("关闭") }}</el-button>
    </div>
  </el-dialog>
</template> 

<script>
//分页组件
import dataManaService from "@/services/dataManaService";
export default {
  name: "addEnumItemDialog",
  props: [
    "addEnumItemVisilable",//控制弹出框显示隐藏
    "addEnumItemTitle",//标题
    "addEnumItemData",//改参数为父组件选择的当前条数据
  ],
  components: {
    // MyPagination
  },
  filters: {},
  data() {
    return {
      //基本信息
      tableData: [
      	{
      	dscpMsg:"",
		enumId:"ABOUT_LINE",
		enumItemId:"FX",
		enumItemName:"风险管理条线"
		},
		{
      	dscpMsg:"",
		enumId:"ABOUT_LINE",
		enumItemId:"GS",
		enumItemName:"公司业务条线"
		}
      ],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      name: "",
      //修改用信息
      clickRowFlags: [],
      hasChangeCode: [],
      hasDeleteCode: [],
      hasAddCode: [],
      deleteCode: [],
      addCode: [],
      modifyData: [],
      showdsmNo: false,
      modifyIndex: [0],
      msg: "",
    };
  },
  created() {},
  computed: {},
  watch: {
    addEnumItemVisilable: {
      handler: function (newval) {
        this.searchEnumItem(
          this.addEnumItemData.enumId,
          this.pageNum,
          this.pageSize
        );
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //根据枚举管理id 获取枚举项管理table数据
    searchEnumItem(enumId, pageNum, pageSize) {
      let data = {
        enumId,
        pageNum,
        pageSize,
      };
      dataManaService.searchEnumItem(data).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.list;
          for (let i = 0; i < this.tableData.length; i++) {
            this.clickRowFlags[i] = false;
          }
          this.total = res.data.total;
          // this.$emit("enumMana", [2, "枚举项管理", this.emnuProData]);
        }
      });
    },
    resetFrom(index) {
      //强制刷新
      this.$forceUpdate();
    },
    //更改表格尺寸
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.hasChangeCode = [];
      this.hasDeleteCode = [];
      this.hasAddCode = [];
      this.searchEnumItem(
        this.addEnumItemData.enumId,
        this.pageNum,
        this.pageSize
      );
    },
    //更改表格页数
    handleCurrentChange(val) {
      this.pageNum = val;
      this.hasChangeCode = [];
      this.hasDeleteCode = [];
      this.hasAddCode = [];
      this.searchEnumItem(
        this.addEnumItemData.enumId,
        this.pageNum,
        this.pageSize
      );
    },
    //修改专有方法
    //插入索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //点击单行
    rowClick(row, column, event) {
      // if (this.type === "modify" || this.type === "add") {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row, true);
      for (let i = 0; i < this.tableData.length; i++) {
        this.clickRowFlags[i] = false;
      }
      this.clickRowFlags[row.index] = true;
      // }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    Trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, "");
    },
    //保存
    save() {
      if (this.tableData.length === 0 && this.total <= 10) {
        this.$message({
          message: this.$i18ns("请至少填写一条枚举项"),
          type: "warning",
        });
        return;
      }
      for (let i = 0; i < this.tableData.length; i++) {
        //删除标志位
        delete this.tableData[i].addUid;
        delete this.tableData[i].index;

        this.tableData[i].enumItemId =
          this.tableData[i].enumItemId &&
          this.Trim(this.tableData[i].enumItemId);
        this.tableData[i].enumItemName =
          this.tableData[i].enumItemName &&
          this.Trim(this.tableData[i].enumItemName);

        if (this.tableData[i].enumItemId === "") {
          this.$message({
            message:
              this.$i18ns("Line") +
              (i + 1) +
              this.$i18ns("行枚举项代码值不能为空！"),
            type: "warning",
          });
          return;
        }
        // var reg1 = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        var reg1 = new RegExp("^[A-Za-z0-9+ ]+$");
        // 代码项不能填写中文(只能填写数字+英文-21/12/21-后端让改)
        if (!reg1.test(this.tableData[i].enumItemId)) {
          this.$message({
            message:
              this.$i18ns("第") +
              (i + 1) +
              this.$i18ns("行枚举项代码值只能填写英文、数字和空格！"),
            type: "warning",
          });
          return;
        }
        if (this.tableData[i].enumItemName === "") {
          this.$message({
            message:
              this.$i18ns("第") +
              (i + 1) +
              this.$i18ns("行枚举项名称不能为空！"),
            type: "warning",
          });
          return;
        }
        var reg2 = new RegExp(
          "^[A-Za-z0-9_()<>、\\-+＋/.*；：:&%％‰‱“”，。\\[\\]\\—－（） \u4e00-\u9fa5]+$"
        );
        if (this.tableData[i].enumItemId.length > 166) {
          this.$message({
            message:
              this.$i18ns("第") +
              (i + 1) +
              this.$i18ns("行枚举代码值长度不能大于166！"),
            type: "warning",
          });
          return;
        }
        if (this.tableData[i].enumItemName.length > 166) {
          this.$message({
            message:
              this.$i18ns("第") +
              (i + 1) +
              this.$i18ns("行枚举项名称长度不能大于166！"),
            type: "warning",
          });
          return;
        }
        for (let j = i + 1; j < this.tableData.length; j++) {
          if (this.tableData[i].enumItemId === this.tableData[j].enumItemId) {
            this.$message({
              message:
                this.$i18ns("第") +
                (i + 1) +
                this.$i18ns("行枚举值和第") +
                (j + 1) +
                this.$i18ns("行枚举值不能相同！"),
              type: "warning",
            });
            return;
          }
        }
      }
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].enumItemId !== "") {
          let flag = true;
          for (let j = 0; j < this.hasChangeCode.length; j++) {
            if (
              this.hasChangeCode[j].enumItemId === this.tableData[i].enumItemId
            ) {
              flag = false;
              break;
            }
          }
          if (flag) {
            this.hasChangeCode.push(this.tableData[i]);
          }
        }
      }
      console.log("最终保存的数据，并请求接口", this.tableData);
      this.saveEnumItem(this.tableData);
    },
    //新增修改枚举管理
    saveEnumItem(ruleForm) {
      for (let i = 0; i < ruleForm.length; i++) {
        ruleForm[i].enumId = this.addEnumItemData.enumId;
      }
      // let data = ...ruleForm
      dataManaService.getManageEnumItems(ruleForm).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.$message(this.$i18ns(res.message), "success");
          // this.$emit("dialogclose", "reload");
          this.$emit("addEnumClose", "true");
        }
      });
    },
    //新建
    Add() {
      console.log("1111", this.modifyIndex);
      if (this.modifyIndex.constructor !== Array) {
        this.modifyIndex = [0];
      }
      console.log("0000", this.modifyIndex);
      !isNaN(this.modifyIndex[this.pageNum - 1])
        ? this.modifyIndex[this.pageNum - 1]++
        : this.modifyIndex.push(1);
      for (let i = 0; i < this.tableData.length; i++) {
        this.clickRowFlags[i] = false;
      }
      console.log(this.addEnumItemData);
      var row = {
        enumItemId: "",
        enumItemName: "",
        dscpMsg: "",
        enumId: "",
        //生成唯一ID，用于防止删除新增列报错
        addUid: this.getUUid(),
      };
      this.tableData.unshift(row);
      this.hasAddCode.push(row);
      this.clickRowFlags.unshift(true);
    },
    getUUid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c === "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    handleClose() {
      this.$emit("addEnumClose");
    },
    changeCode(row) {
      if (row.enumId !== "") {
        var flag = true;
        for (let i = 0; i < this.hasChangeCode.length; i++) {
          if (this.hasChangeCode[i].enumItemId === row.enumItemId) {
            flag = false;
            break;
          }
        }
        if (flag) {
          this.hasChangeCode.push(row);
        }
      }
    },
    //删除
    Delete() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.clickRowFlags[i] = false;
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        //如果instId为''，则是删除的新增的列，只需要删除hasAddCode（新增列数据）和tableData(显示的所有数据)里的数据即可，不用传给后端
        if (this.multipleSelection[i].enumItemId === "") {
          for (let j = 0; j < this.hasAddCode.length; j++) {
            if (
              this.hasAddCode[j].addUid !== undefined &&
              this.hasAddCode[j].addUid === this.multipleSelection[i].addUid
            ) {
              this.hasAddCode.splice(j, 1);
            }
          }
        } else {
          this.hasDeleteCode.push(this.multipleSelection[i].enumItemId);
        }
        if (this.multipleSelection[i].index < this.modifyIndex) {
          this.modifyIndex--;
        }
        this.tableData[this.multipleSelection[i].index] = undefined;
      }
      let tep = [];
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i] !== undefined) {
          tep.push(this.tableData[i]);
        }
      }
      this.tableData = tep;
      this.$refs.multipleTable.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
.addEnumItemDialog {
  max-height: calc(90vh - 40px);
  padding: 20px 20px 0;
  margin: -20px -20px 0;
  overflow: auto;

  .elpagination {
    padding: 5px 0 5px 20px;
    float: right;
  }
  /deep/.el-table {
    background: inherit !important;
    color: inherit !important;
    span.custom-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .buttomFrom {
    margin-top: 0px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .titleClass {
    // height: 40px;
    line-height: 40px;
    // color: #fff;
    background: #f5f7fb;
    padding: 0;
    font-size: 16px;
    // margin-bottom: 16px;
  }
}
</style>