若依 ruoyi 分离版 vue 简单的行内编辑实现

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          v-model="scope.row.name"
          size="small"
          placeholder="请输入内容"
          @blur="handleInputConfirm(scope.row)"
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.edit"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        edit: false
      }, {
        date: '2016-05-04',
        name: '李小虎',
        edit: false
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      row.edit = true;
      this.$set(this.tableData, index, row);
    },
    handleInputConfirm(row) {
      row.edit = false;
      this.$set(this.tableData, this.tableData.indexOf(row), row);
    }
  }
}
</script>

这段代码展示了如何在使用Element UI和Vue.js的环境下实现一个简单的行内编辑功能。在表格的姓名列中，当用户点击编辑按钮时，会进入编辑模式，编辑完成后，输入框失去焦点时，行进入非编辑状态。这是一个典型的数据表格行内编辑的操作模式。