基于el-table实现行内增删改

实现效果:

核心代码:

html 复制代码
<el-table :data="items"
                  style="width: 100%;margin-top: 16px"
                  border
                  :key="randomKey">
          <el-table-column label="计划名称"
                           property="name">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.name"></el-input>
              </template>
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划完成时间"
                           property="executionDate" width="175">
            <template slot-scope="scope">
              <el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date"
                              v-model="scope.row.timeEnd">
              </el-date-picker>
              <span v-else>{{ parseTime(scope.row.timeEnd) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="协同人"
                           property="leaderList">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select
                  v-model="scope.row.leaderList"
                  clearable filterable multiple>
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.nickname"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.leaderName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行人" width="80">
            <template>
              <span>{{ $store.getters.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="{row,column,$index}">
              <el-button
                v-if="row.edit"
                type="success" icon="el-icon-check" circle
                size="small"
                @click="confirmEdit(row)"
              >
              </el-button>
              <el-button
                v-if="row.edit"
                icon="el-icon-close" circle
                size="small"
                @click="cancelEdit(row)"
              >
              </el-button>
              <el-button
                type="primary" icon="el-icon-edit" circle
                v-if="!row.edit"
                size="small"
                @click="row.edit=!row.edit"
              >
              </el-button>
              <el-button
                type="danger" icon="el-icon-delete" circle
                size="small" @click="handleDelete($index)"
                v-if="!row.edit"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex;margin-top: 28px;justify-content: center;">
        <el-button @click="addSon" size="small" icon="el-icon-plus">添加子计划</el-button>
      </div>

Method:

javascript 复制代码
cancelEdit(row) {
      row.name = row.oldName
      row.leaderList = row.oldLeaderList
      row.timeEnd = row.oldTimeEnd
      row.leaderName = row.oldLeaderName
      row.edit = false
      this.$message({
        message: '已恢复原值',
        type: 'warning'
      })
    },
    confirmEdit(row) {
      row.edit = false
      row.oldName = row.name
      row.oldLeaderList = row.leaderList
      row.oldTimeEnd = row.timeEnd
      let arr = []
      row.leaderList.forEach(i => {
        let userName = this.userList.find(({userId}) => userId === i).nickname
        arr.push(userName)
      })
      row.leaderName = arr.join()
      row.oldLeaderName = row.leaderName
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },
    handleDelete(index) {
      this.items.splice(index, 1)
    },
    addSon() {
      this.items.push({
        name: null,
        timeEnd: null,
        leaderList: [],
        leaderName: null,
        edit: true
      })
    },
相关推荐
云枫晖4 分钟前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_6 分钟前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
掘金安东尼13 分钟前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
昔人'34 分钟前
html`<mark>`
前端·javascript·html
前端拿破轮1 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
SuperherRo1 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载
用户47949283569151 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手2 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
勇敢di牛牛2 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
晴殇i3 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试