element-table表格实现点击可编辑，失去焦点自动保存编辑的信息

在Vue.js中使用Element UI的el-table组件实现点击单元格即可编辑，失去焦点时自动保存编辑信息的功能，可以通过结合el-table的cell-click事件和input元素的blur事件来实现。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          :ref="'input'+scope.$index"
          v-model="scope.row.name"
          @blur="handleInputBlur(scope.row, scope.$index)"
          @click.native.stop
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </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: {
    handleCellClick(row, column, cell, event) {
      if (column.property === 'name') {
        row.edit = true;
        this.$nextTick(() => {
          this.$refs['input' + row.index][0].$refs.input.focus();
        });
      }
    },
    handleInputBlur(row, index) {
      row.edit = false;
      // 这里可以添加保存操作的代码，例如发送请求到后端保存数据
      console.log('保存数据:', row);
    }
  }
}
</script>

在这个示例中，我们定义了一个tableData数组来存储表格数据。每个数据项都有一个edit属性，用来标识该行是否处于编辑状态。在el-table-column中，我们使用template来根据edit属性决定是否显示el-input组件。当单元格被点击时，通过监听cell-click事件来设置对应行的edit属性为true，并且在Vue的下一个更新周期中使输入框获得焦点。当输入框失去焦点时，即触发blur事件，我们将edit属性设置为false，并执行保存操作。