Element ui 如何实现气泡弹出式表单?

如下图,点击table列表字段,弹出气泡,即可编辑此字段内容。
Element ui中有气泡确认组件Popconfirm,好像不能加表单吧。这种情况一般如何实现 ?

如下是使用Popover组件嵌套的,问题如下:

  1. slot="reference"作为点击触发点,嵌套在table一列的v-for循环中,会出现多个
  2. 若将slot="reference"向外移动一层,则点击不生效。
                    <el-table-column label="所属项目组" width="200" align="center" key="groupName" prop="groupName"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                placement="top"
                                width="160"
                                v-model="visiblePopover">
                                <el-form ref="form" :model="form"  label-width="100px">
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form-item label="所属项目组"  multiple prop="groupIds">
                                                <el-select
                                                    v-model="form.groupIds"
                                                    multiple placeholder="请选择">
                                                    <el-option
                                                        v-for="dict in projectTeamOptions"
                                                        :key="dict.groupId"
                                                        :label="dict.groupName"
                                                        :value="dict.groupId"
                                                    />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
                                </div>
                                <span v-for="(item, index) in scope.row.projectGroups" slot="reference" class="f-fontBlue">{{ item.groupName }}</span>
                            </el-popover>
                        </template>
                    </el-table-column>
阅读 4.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题