实现＜el-table＞表格内可编辑（多列）

在Vue.js中使用Element UI库实现可编辑的表格，可以通过结合<el-table>和<el-input>组件来完成。以下是一个简单的实现示例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
      <template slot-scope="scope">
        <el-input
          v-if="scope.column.editable"
          v-model="scope.row[scope.column.prop]"
          size="small"
          @change="handleEdit(scope.$index, scope.column.prop, scope.row)"
        ></el-input>
        <span v-else>{{ scope.row[scope.column.prop] }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No.189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-04',
          name: 'Jerry',
          address: 'No.189, Grove St, Los Angeles'
        }
      ],
      columns: [
        { label: 'Date', prop: 'date', editable: true },
        { label: 'Name', prop: 'name', editable: true },
        { label: 'Address', prop: 'address', editable: false }
      ]
    };
  },
  methods: {
    handleEdit(index, key, row) {
      // 处理编辑逻辑，例如更新数据源等
      console.log(`${key} edited`);
    }
  }
};
</script>

在这个示例中，我们定义了一个tableData数组来表示表格数据，以及一个columns数组来定义表格列的属性和标签。我们使用了v-for来循环columns数组，为每一列创建对应的<el-table-column>。

在<el-table-column>内部，我们使用<template slot-scope="scope">来访问每个单元格的数据和列属性。如果该列被定义为可编辑的（editable为true），我们则显示<el-input>组件；否则显示一个只读的文本标签。

当用户在输入框中进行编辑时，我们监听@change事件，并在handleEdit方法中处理编辑后的逻辑，例如更新数据源。这里的逻辑需要根据实际应用场景来定制。