element实现table当前行可编辑、保存

概述<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;" :cell-style="changeColor"

<el-table              ref="multipletable"              :data="tableData"              tooltip-effect="dark"              style="wIDth: 100%;"              :cell-              :header-cell-              :row-              @selection-change="handleSelectionChange"      >        <el-table-column type="selection" wIDth="55"></el-table-column>        <el-table-column  label="行政区划" wIDth="120">          <template slot-scope="scope">            <el-input v-model="scope.row.date" :Disabled="isEditObj[scope.$index].a"></el-input>          </template>        </el-table-column>        <el-table-column prop="address" label="问题类型">          <template slot-scope="scope">            <el-input v-model="scope.row.name" :Disabled="isEditObj[scope.$index].a"></el-input>          </template>        </el-table-column>        <el-table-column prop="address" label=" *** 作" wIDth="282px">          <template slot-scope="scope">            <div v-show="isEditObj[scope.$index].a">              <el-button type="text" icon="el-icon-s-claim" size="small" @click="editUserInfo(scope.$index)">编辑              </el-button>&nbsp;|              <el-button type="text" icon="el-icon-edit-outline" size="small" @click="details">详情              </el-button>&nbsp;|              <el-button type="text" icon="el-icon-delete" size="small">删除</el-button>            </div>            <div v-show="!isEditObj[scope.$index].a">              <el-button type="text" icon="el-icon-s-claim" size="small" @click="checkEditUserInfo(scope.$index)">保存              </el-button>&nbsp;|              <el-button type="text" icon="el-icon-edit-outline" size="small" @click="cancelEditUserInfo(scope.$index)">取消              </el-button>            </div>          </template>        </el-table-column>      </el-table>

2、设置：isEditObj: [],

3、

mounted() {        for (let i in this.tableData) {          let a = "edit"+i;          this.isEditObj.push({            a:true          });        }    },

4、

editUserInfo(index) {        this.isEditObj[index].a = false;      },

checkEditUserInfo(index) {      //编辑用户信息
  this.isEditObj[index].a = true;
},

cancelEditUserInfo(index) {  this.isEditObj[index].a = true;}

总结

以上是内存溢出为你收集整理的element实现table当前行可编辑、保存全部内容，希望文章能够帮你解决element实现table当前行可编辑、保存所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。