vue，element行内编辑实现

一 环境Vue element

• 引入相关文件

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

• 模拟相关数据

  list: [
    { id: "1", name: "张三", age: 18, sex: "男"},
    {id: "2", name: "李四", age: 19, sex: "男"},
    {id: "3", name: "王五", age: 20, sex: "男" }
  ],
  userId: ' '

• 编辑页面

 <div id="app">
      <el-table :data="list" style="width: 100%" stripe border>
        <el-table-column prop="id" label="ID" width="180">
          <template slot-scope="scope">
            <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.id"></el-input>
            <span v-else>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.name"></el-input>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="180">
          <template slot-scope="scope">
            <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.age"></el-input>
            <span v-else>{{scope.row.age}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="180">
          <template slot-scope="scope">
            <el-input v-if="userId===scope.row.id" size="mini" v-model="scope.row.sex"></el-input>
            <span v-else>{{scope.row.sex}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="编辑">
          <template slot-scope="scope">
            <el-button v-if="userId===scope.row.id" type="danger" icon="el-icon-circle-close" size="mini" @click="userId=''"></el-button>
            <el-button v-if="userId===scope.row.id" type="danger" icon="el-icon-check" size="mini" @click="saveUser(scope.row)"></el-button>
            <el-button v-else icon="el-icon-edit" type="danger" size="mini" @click="editUser(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

• 相关方法

methods: {
  editUser (id) {
    this.userId = id
  },
  saveUser (user) {
    // 模拟删除
    this.list = this.list.filter(val => !(user.id).includes(val.id))
    // 增加
    this.list.push(user)
    this.userId = ''
  }
}

• 效果如图

  
  效果图.jpg