【vue】可编辑的表格 el-table

在Vue中创建可编辑的el-table，你可以使用element-ui的el-table组件结合vue-draggable实现行的拖拽功能，并使用el-input实现单元格编辑。以下是一个简单的例子：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="scope">
          <el-input
            v-if="scope.column.editable"
            v-model="scope.row[scope.column.prop]"
            @change="handleEdit(scope.$index, scope.column.prop, scope.row)"
            size="small"
          ></el-input>
          <span v-else>{{ scope.row[scope.column.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 初始数据
      ],
      columns: [
        // 列定义，editable 标记该列是否可编辑
      ]
    };
  },
  methods: {
    handleEdit(index, key, row) {
      // 处理编辑逻辑
    }
  }
};
</script>

在这个例子中，tableData是表格的数据源，columns定义了表格的列信息，包括列名和列是否可编辑。el-input用于显示可编辑的输入框，handleEdit方法用于处理编辑后的数据更新。

请根据具体需求调整tableData和columns的数据结构和方法实现。