美文网首页
vue3 + element-plus。el-table 表头中

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