el-table结合el-popover使用通过ref的方式控制显示隐藏

最新推荐文章于 2025-05-22 17:20:34 发布

原创最新推荐文章于 2025-05-22 17:20:34 发布 · 5.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

该代码示例展示了如何在Vue.js应用中使用ElementUI的el-table组件，创建一个包含Popover的表格列。Popover内有可点击的任务分配，点击时触发assignTask方法，同时实现了点击其他地方关闭Popover的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--  -->
<template>
    <div>
        <el-table :data="tableData">
            <el-table-column label="主播" prop="accountNickname" align="center"></el-table-column>
            <el-table-column label="主播" prop="accountNickname" align="center">
                <template slot-scope="scope">
                    <el-popover placement="bottom" :ref="`popover-${scope.$index}`" trigger="click">
                        <div class="task-box">
                            <div v-for="(item) in [{
                                accountUuid: 1,
                                nickname: 'accountUuid1'
                            },
                            {
                                accountUuid: 2,
                                nickname: 'accountUuid2'
                            },
                            {
                                accountUuid: 3,
                                nickname: 'accountUuid3'
                            },
                            {
                                accountUuid: 4,
                                nickname: 'accountUuid4'
                            }
                            
                            ]" :key="item.accountUuid" @click="assignTask(scope.row, item)">
                                {{ item.nickname + scope.$index }}
                            </div>
                        </div>
                        <div slot="reference" class="show-sel" @click.stop="showSel(scope)">
                            <span>{{ scope.row.accountNickname + scope.$index || '-' }}</span> <i
                                :class="`el-icon-arrow-down`"></i>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
                {
                    accountNickname: 'accountNickname',
                    show: false
                },
            ],
            tableIndex: 0,
        };
    },
    watch: {},
    components: {},
    computed: {},
    created() { },
    mounted() { },
    methods: {
        showSel({ row, $index }) {
            console.log(this.$refs[`popover-${$index}`]); // 在这里能拿到对应的元素
            this.tableIndex = $index // 存储当前显示的$index
            this.doClose() // 循环遍历
        },
        assignTask(row, role) {
            this.$refs[`popover-${this.tableIndex}`].doClose() // 操作完成后隐藏对应的popover
        },
        doClose(){
            this.tableData.forEach((ele,index)=>{
                this.$refs[`popover-${index}`].doClose()
            })
        }
    }
}

</script>
<!-- <style scoped>
</style> -->