element-ui table列点击 编辑下拉框

element-ui是一款非常常用的前端组件库，其中的table组件对于数据展示和操作非常方便。在使用table组件时，有时需要对表格中的某些字段进行编辑。同时，有些字段可能是预定义的枚举值，此时需要使用下拉框来展示可选的选项。下面介绍如何在element-ui table中实现这个功能。

首先，在table组件的columns中定义需要编辑的列。例如，我们将某一列的prop属性定义为status，并在scopedSlots中定义一个edit组件来展示可选的枚举值。代码如下：

<template>
  <el-table
    :data="tableData"
    :columns="columns">
    <template v-slot:edit="{ row, column, $index }">
      <el-select
        v-model="row.status"
        placeholder="请选择"
        @change="handleChange(row)"
        filterable>
        <el-option
          v-for="(item, index) in options"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '用户1',
          status: '1',
        }, {
          name: '用户2',
          status: '2',
        }],
        columns: [{
          prop: 'name',
          label: '姓名',
        }, {
          prop: 'status',
          label: '状态',
          scopedSlots: { customRender: 'edit' },
        }],
        options: [{
          label: '待审核',
          value: '1',
        }, {
          label: '已通过',
          value: '2',
        }, {
          label: '已拒绝',
          value: '3',
        }],
      };
    },
    methods: {
      handleChange(row) {
        console.log(row);
      },
    },
  };
</script>

在上面的代码中，我们定义了一个options数组来存储枚举值的选项。在每个行上的下拉框中，我们将对应的状态值绑定到了row.status上，并监听了下拉框值的变化，以便在handleChange方法中处理状态值的提交等操作。

使用element-ui的table组件实现带编辑功能的下拉框不仅简单而且十分方便，可以大大加快前端开发的速度。