el-table可编辑

el-table是一个Vue组件，可以实现表格的展示和编辑功能。根据提供的引用内容，为了实现el-table的编辑功能，可以使用以下步骤：

1. 首先，在Vue的data选项中定义一个列表数组，数组中的每个对象代表表格的一行数据。每个对象可以包含需要显示和编辑的各个字段。

2. 在el-table组件中，使用v-for指令遍历列表数组，并使用el-table-column组件来定义表格的列。

3. 对于需要可点击触发事件的列，可以使用slot-scope属性来定义点击事件。通过绑定@click事件来触发对应的方法。

4. 对于需要进行编辑的列，可以添加一个编辑按钮或图标，并通过@click事件绑定editColumn方法来实现编辑功能。在editColumn方法中，通过设置对应数据对象的edit属性为true来开启编辑状态。

5. 当编辑文本失去焦点时，可以通过绑定@blur事件来触发blurColumn方法。在blurColumn方法中，通过设置对应数据对象的edit属性为false来关闭编辑状态。

下面是一个具体的示例代码，可以参考其中的实现方式：

<el-table :data="list1">
  <el-table-column label="姓名">
    <template slot-scope="scope">
      <div @click="clickColumn1(scope.row, scope.$index)">
        {{ scope.row.name }}
      </div>
    </template>
  </el-table-column>
  <el-table-column label="年龄">
    <template slot-scope="scope">
      <div @click="clickColumn2(scope.row, scope.$index)">
        {{ scope.row.age }}
      </div>
    </template>
  </el-table-column>
  <el-table-column label="编辑">
    <template slot-scope="scope">
      <el-button type="primary" @click="editColumn(scope.row, scope.$index)">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

export default {
  data() {
    return {
      list1: [
        { name: 'bob', age: 11, remark1: 'remark1', remark2: 'remark2', remark3: 'remark3', remark4: 'remark4', edit: false },
        { name: 'mary', age: 22, remark1: 'remark1', remark2: 'remark2', remark3: 'remark3', remark4: 'remark4', edit: false },
      ]
    };
  },
  methods: {
    clickColumn1(column, index) {
      console.log(column);
      console.log(index);
      console.log(111);
    },
    clickColumn2(column, index) {
      console.log(column);
      console.log(index);
      console.log(222);
    },
    editColumn(row, index) {
      console.log('editColumn');
      this.$set(this.list1[index], 'edit', true);
    },
    blurColumn(row, index) {
      console.log('blurColumn');
      this.$set(this.list1[index], 'edit', false);
    }
  }
}