el-table单元格下拉框

在 el-table 中使用下拉框作为单元格的一种常见需求。你可以通过自定义列组件来实现这个功能。以下是一个示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="gender" label="性别">
      <template slot-scope="scope">
        <custom-dropdown :value="scope.row.gender" @change="handleChange(scope.row, $event)"></custom-dropdown>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import CustomDropdown from '@/components/CustomDropdown.vue';

export default {
  components: {
    CustomDropdown
  },
  data() {
    return {
      tableData: [
        { name: '张三', gender: '男' },
        { name: '李四', gender: '女' },
        // ...
      ]
    };
  },
  methods: {
    handleChange(row, value) {
      row.gender = value;
    }
  }
};
</script>

在上述示例中，我们使用了 el-table 和 el-table-column 来渲染表格，并在 "性别" 列的单元格中使用了自定义的下拉框组件 CustomDropdown。每行数据的 "性别" 值通过 value 属性传入下拉框组件，并通过 @change 事件监听值的变化，在 handleChange 方法中更新表格数据。

希望这个示例对你有所帮助！如有任何问题，请随时提问。