elementUI如何点击单元格弹出新的列表

在Element UI中，要实现在表格（`el-table`）的单元格内点击后弹出一个新的列表，你可以通过结合`v-popover`组件和自定义事件处理来完成。这里是一个简单的示例：

首先，在你的表格列模板中，添加一个`el-popover`元素，绑定到每个单元格的数据上，并设置触发条件：

<template>
  <el-table-column
    prop="itemName" // 替换为实际需要展示的属性名
    label="名称"
    width="180">
    <template slot-scope="{ $index, row }">
      <span @click="openPopover(row)">{{ row.itemName }}</span>
      <el-popover placement="bottom-end">
        <!-- 自定义内容 -->
        <el-menu :model="listItems" @select="handleSelect"></el-menu>
      </el-popover>
    </template>
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      listItems: [
        { value: '选项1', label: '选项1' },
        { value: '选项2', label: '选项2' },
        // 添加更多的选项...
      ],
    };
  },
  methods: {
    openPopover(row) {
      this.$refs.popover.showPopper({
        el: document.querySelector(`#popover-${row.id}`), // 获取当前行对应的popover
        offset: { top: 6, left: 12 }, // 定义偏移量
      });
    },
    handleSelect(item) {
      console.log('选择的项：', item); // 当用户选择列表项时执行的回调
      // 这里可以做进一步的操作，比如更新数据等
      this.closePopover();
    },
    closePopover() {
      this.$refs.popover.hidePopper();
    },
  },
};
</script>

在这个例子中，当你点击单元格时，会显示一个下拉菜单，用户可以选择一个选项。当用户选择时，`handleSelect`方法会被调用，并且`closePopover`方法用于关闭弹出框。