vue3 + element-plus。el-table 表头中
2021-11-16 本文已影响0人
黑色的浅蓝
问题描述:在有fix="left" 或 "right" 的列中按照官网给的例子,没有效果。
我的解决办法:封装一个trigger="click"的popover组件。不知道为什么写在同一个vue文件中没有效果。
<--子组件内-->
<template>
<el-popover trigger="click">
<slot><slot>
<el-button size="mini" type="text" @click="btnClick('cancel')">取消</el-button>
<el-button type="primary" size="mini" @click="btnClick('confirm')">确定</el-button>
<template #reference>
<span :id="myPopoverId">图标</span>
</template>
</el-popover>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
let id = 0;
export default defineComponent({
setup(props, ctx) {
const myPopoverId = 'myPopover_' + (++id)
return {
myPopoverId,
btnClick(type: 'cancel' | 'confirm'){
document.querySelect(`#${myPopoverId }`)?.click();
ctx.emit(type)
}
}
},
})
</script>
<--父组件调用子组件-->
<template>
<el-table-column align="right">
<template #header>
表头
<my-popover>xxx</my-popover>
</template>
</el-table-column>
</template>