vue3 + element-plus。el-table 表头中
作者:
黑色的浅蓝 | 来源:发表于
2021-11-16 16:15 被阅读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>
本文标题:vue3 + element-plus。el-table 表头中
本文链接:https://www.haomeiwen.com/subject/wnphtrtx.html
网友评论