vue表格新增行、编辑行

vue的table，直接在table上添加行，编辑行。

特别提醒
在网上有些案例中，有些bug，比如，点击编辑之后，虽然属性都设置进去了，但是编辑框不出来，根据经验，摸索出来的解决方案是对主键进行重新设置，比如这里的id重新设置还原之后，即可解决bug。

row.id=row.id+" ";
row.id=row.id.trim();

1、代码

通过在行上添加一个变量来控制是新增，还是编辑，或者是显示。
下面这一段js代码，定义了几个属性
1、start，通过设置start来处理判断
start == 0是新建，start==1是编辑，start=undefined是显示。
2、hasUnSaveItem来判断是否有未保存的编辑项。
3、hasUnSaveItemIndex来判断未保存的编辑项的索引号

 //start == 0的时候，新建，start==1的时候编辑
    isAddDisplay(row) {
      return row.start != undefined && row.start == 0;
    },
    isEditDisplay(row) {
      return row.start != undefined && row.start == 1;
    },
    isAddOrEditDisplay(row) {
      return row.start != undefined && (row.start == 0 || row.start == 1);
    },
    setAdd(row, index) {
      row.start = 0;
      this.hasUnSaveItem = true;
      this.hasUnSaveItemIndex = index;
    },
    setEdit(row, index) {
      row.start = 1;
      this.hasUnSaveItem = true;
      this.hasUnSaveItemIndex = index;
    },
    quitEdit(row, index){
      row.start = undefined;
      this.hasUnSaveItem = '';
      this.hasUnSaveItemIndex = '';
    },

下面是整个页面的完整代码

<template>
  <div class="app-container">
    <div class="module-title"> 管理页面 </div>
    <el-row class="mt20 mb10">
      <el-col :span="24" class="toolbar">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-col>
    </el-row>

    <el-table class="tablelist" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column  width="50" header-align="center">
        <template slot-scope="{row,$index}">
          <span>{{$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" min-width="120px">
        <template slot-scope="scope">
          <el-input v-model="vo.name" v-if="isAddOrEditDisplay(scope.row)" style="width:90%;"></el-input>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="166px" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button  type="primary" plain
                     @click="isAddOrEditDisplay(row)?handleSave(row):handleUpdate(row, $index)"
          >{{isAddOrEditDisplay(row)?"保存":"修改"}}</el-button>
          <el-button  type="danger" plain
                     @click="isAddOrEditDisplay(row)?handleCancel(row, $index):handleDelete(row)"
          >{{isAddOrEditDisplay(row)?"取消":"删除"}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
  </div>
</template>

<script>
export default {
  name: "GroupUserR",
  data() {
    return {
      // 遮罩层
      loading: true,
      tempList:[{name:'',start:0}],
      list2:[],
      hasUnSaveItem:'',//如果有编辑的项未保存，就提示有未保存的项。
      hasUnSaveItemIndex:'',//未保存的序号。
      vo: {
        name:"",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    // this.getList();
    this.loading = false;
  },
  activated() {
    const time = this.$route.query.t;
    if (time != null && time != this.uniqueId) {
      this.uniqueId = time;
      this.resetQuery();
      this.getList();
    }
  },
  methods: {
    //start == 0的时候，新建，start==1的时候编辑
    isAddDisplay(row) {
      return row.start != undefined && row.start == 0;
    },
    isEditDisplay(row) {
      return row.start != undefined && row.start == 1;
    },
    isAddOrEditDisplay(row) {
      return row.start != undefined && (row.start == 0 || row.start == 1);
    },
    setAdd(row, index) {
      row.start = 0;
      this.hasUnSaveItem = true;
      this.hasUnSaveItemIndex = index;
    },
    setEdit(row, index) {
      row.start = 1;
      this.hasUnSaveItem = true;
      this.hasUnSaveItemIndex = index;
    },
    quitEdit(row, index){
      row.start = undefined;
      this.hasUnSaveItem = '';
      this.hasUnSaveItemIndex = '';
    },
    resetTempList() {
      this.tempList=[{name:'',start:0}];
    },
    resetVo() {
      this.vo = {
        name:""
      };
    },
    getList() {
      this.loading = true;
      let _this = this;
      getRolePermissions(this.queryParams).then(response => {
        if(response.code == 200 && response.data.length > 0) {
          _this.list2 = response.data;
          });
          _this.list = [].concat(_this.list2);
        }
        this.loading = false;
      }).catch(e=>{
        this.loading = false;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      if(this.hasUnSaveItem) {
        this.msgInfo("有编辑项未保存，请保存后操作。");
        return;
      }
      this.resetVo();
      this.resetTempList();
      this.list = this.tempList.concat(this.list2);
      this.setAdd(this.list[0], 0);
    },
    /** 保存 */
    handleSave(row) {
      let _this = this;
      let pars = {
        id: row.id,
        name: _this.vo.name
      };
      if (!row.id && row.id != undefined) {
        updateRolePermission(pars).then(response => {
          this.msgSuccess("修改成功");
          this.getList();
        }).catch(e=>{
          this.resetVo();
          this.handleDelete(row);
        });
      } else {
        addRolePermission(pars).then(response => {
          this.msgSuccess("添加成功");
          this.getList();
        }).catch(e=>{
          this.resetVo();
          this.handleDelete(row);
        });
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row, index) {
      if(this.hasUnSaveItem && this.hasUnSaveItemIndex != index) {
        this.msgInfo("有编辑项未保存，请保存后操作。");
        return;
      }
      this.setEdit(row, index);
      let _this = this;
      row.id=row.id+" ";
      row.id=row.id.trim();
      _this.vo.name = row.name;
    },
    /** 取消按钮操作 */
    handleCancel(row, index) {
      this.quitEdit(row, index);
      if(row.id) {
        row.id=row.id+" ";
        row.id=row.id.trim();
      } else {
        this.list.splice(index, 1);
      }
      return;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      if(ids.length == 0) {
        this.list = this.list.slice(1);
        return;
      }
      this.$confirm('是否确认删除编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delete(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
  }
};
</script>