VUE+Element UI实现简单的表格单元格编辑效果的示例的代码

在Vue.js中使用Element UI库实现一个简单的表格单元格编辑效果，可以按照以下步骤进行：

1. 首先确保已经安装并引入了Element UI库。如果还没有安装，可以通过npm或yarn进行安装。

2. 在Vue组件的模板中创建一个表格，使用`<el-table>`和`<el-table-column>`标签定义表格和列。

3. 使用`<el-table-column>`的`edit-method`属性指定单元格的编辑方法。

4. 使用`<el-input>`组件在表格单元格内进行输入，当单元格处于编辑状态时显示。

下面是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      v-for="field in fields"
      :key="field.prop"
      :prop="field.prop"
      :label="field.label">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.editing"
          v-model="scope.row[field.prop]"
          @blur="saveEdit(scope)"
        ></el-input>
        <span v-else>{{ scope.row[field.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      fields: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址' }
      ],
      editingRow: null
    }
  },
  methods: {
    saveEdit(scope) {
      this.editingRow = null;
      console.log('save', scope.row);
    },
    startEdit(row) {
      this.editingRow = row;
    }
  }
}
</script>

在这个示例中，我们定义了一个表格和一系列字段。每个单元格会根据当前行是否处于编辑状态来决定显示`el-input`组件还是内容本身。点击单元格时，`startEdit`方法会被调用，将当前行标记为编辑状态，并显示`el-input`。当编辑完成后，失去焦点时，会调用`saveEdit`方法保存更改。