<!-- -->
<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> -->
el-table结合el-popover使用通过ref的方式控制显示隐藏
最新推荐文章于 2024-08-08 21:52:27 发布