给一个el-table内容可编辑，可选择下拉框的完整Demo

以下是一个完整的 Element UI 的表格（el-table）的示例，其中内容可编辑，并包含下拉框选择的功能：

<template>
  <div>
    <el-table :data="tableData" :show-summary="false">
      <el-table-column prop="name" label="Name" :editable="true">
        <template slot-scope="scope">
          <span v-if="scope.row !== editingRow">{{ scope.row.name }}</span>
          <el-input v-else v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="age" label="Age" :editable="true">
        <template slot-scope="scope">
          <span v-if="scope.row !== editingRow">{{ scope.row.age }}</span>
          <el-input v-else v-model.number="scope.row.age"></el-input>
        </template>
      </el-table-column>

      <el-table-column prop="gender" label="Gender" :editable="true">
        <template slot-scope="scope">
          <span v-if="scope.row !== editingRow">{{ scope.row.gender }}</span>
          <el-select v-else v-model="scope.row.gender">
            <el-option label="Male" value="Male"></el-option>
            <el-option label="Female" value="Female"></el-option>
          </el-select>
        </template>
      </el-table-column>

      <!-- 其他列定义 -->

      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">Edit</el-button>
          <el-button @click="handleSave(scope.row)" v-if="scope.row === editingRow">Save</el-button>
          <el-button @click="handleCancel(scope.row)" v-if="scope.row === editingRow">Cancel</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        // 其他行数据
      ],
      editingRow: null // 正在编辑的行，默认为null
    };
  },
  methods: {
    handleEdit(row) {
      this.editingRow = row;
    },
    handleSave(row) {
      // 处理保存编辑的逻辑，例如发送请求保存数据到后端
      this.editingRow = null; // 清除编辑状态
    },
    handleCancel(row) {
      // 处理取消编辑的逻辑，例如恢复原始数据
      this.editingRow = null; // 清除编辑状态
    }
  }
};
</script>

在这个示例中，表格的每一行都包含一个 "Edit" 按钮，点击该按钮会将对应的行设置为编辑状态。在编辑状态下，可以修改单元格中的文本、数字或下拉框的选项。当点击 "Save" 按钮时，会触发 `handleSave` 方法来保存编辑的数据。当点击 "Cancel" 按钮时，会触发 `handleCancel` 方法来取消编辑并恢复原始数据。

注意：这只是一个简单的示例，你可能需要根据自己的实际需求进行修改和扩展，如增加校验、验证等功能。