vue+ElementUI实现可编辑表格的方法

Vue开发项目的时候，碰到了需要对表格内容进行实时编辑提交的需求。这里提供两种可编辑表格的实现方法，供大家学习参考。

方法一：点击即编辑，离开则提交

HTML代码片段：

// 表格
 <el-table
 	class="tb-edit"
 	:data="tableData"
    style="width: 100%"
    highlight-current-row
    @row-click="handleCurrentChange"
	> 
    <el-table-column prop="id" label="工号">
    	<template slot-scope="scope">
        <el-input
        	size="small"
            v-model="scope.row.id"
            placeholder="请输入内容"
            @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
        <span >{{scope.row.id}}</span>
        </template>
	</el-table-column>
    <el-table-column prop="name" label="姓名">
    	<template slot-scope="scope">
        	<el-input
            	size="small"
                v-model="scope.row.name"
                placeholder="请输入内容"
                @change="handleEdit(scope.$index, scope.row)"
            ></el-input>
            <span>{{scope.row.name}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" >
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.age"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.age}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="成绩" >
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.score"
                  placeholder="请输入内容"
                  @change="handleEdit(scope.$index, scope.row)"
                ></el-input>
                <span>{{scope.row.score}}</span>
              </template>
            </el-table-column>
         </el-table>

JS代码：

export default {
  name: "UserList",
  data() {
    return {
      tableData:[
	    {
	      id: '10001',
	      name: '张三',
	      age: '26',
	      score: '90'
	    },
		{
	      id: '10002',
	      name: '李四',
	      age: '27',
	      score: '95'
	    },
		{
	      id: '10003',
	      name: '王五',
	      age: '26',
	      score: '98'
	    }], 
	 userName: "",
      userId: "",
     };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      console.log(this.tableData);
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column);
    }
}

CSS代码：

.tb-edit .el-input {
  display: none;
}
.tb-edit .current-row .el-input {
  display: block;
}
.tb-edit .current-row .el-input + span {
  display: none;
}

方法二：点击右侧编辑按钮编辑，按钮显示切换成“保存”，点击保存，将信息提交，按钮显示切换成“编辑”

HTML代码片段：

<el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="工号">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.id"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.name"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.age"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.age}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="分数">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.score"
                  v-show="scope.row.showEdit"
                  placeholder="请输入内容"
                ></el-input>
                <span v-show="!scope.row.showEdit">{{scope.row.score}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  class="btn bg_green"
                  @click="handleEdit(scope.$index, scope.row)"
                >{{scope.row.showEdit?'保存':"修改"}}</el-button>
              </template>
            </el-table-column>
</el-table>

JS代码：

export default {
  name: "UserList",
  data() {
    return {
      tableData:[
	    {
	      id: '10001',
	      name: '张三',
	      age: '26',
	      score: '90',
	      showEdit: false
	    },
		{
	      id: '10002',
	      name: '李四',
	      age: '27',
	      score: '95',
	      showEdit: false
	    },
		{
	      id: '10003',
	      name: '王五',
	      age: '26',
	      score: '98',
	      showEdit: false
	    }], 
	 userName: "",
      userId: "",
     };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      row.showEdit = !row.showEdit;
      if (!row.showEdit) {
        console.log("提交");
        console.log(row);
       }
    }
}