element Table :show-overflow-tooltip="true" 展示内容很多展示不想全屏显示 使用 el-popover 替代

<template slot-scope="scope">
      <span
            v-if="scope.row.extend && scope.row.extend.length > 20"
                 >
                        <ez-popover
                            placement="top-start"
                            title=""
                            width="600"
                            trigger="hover"
                            popper-class="workorder-problem-desc"
                        >
                            <div>{{ scope.row.extend }}</div>
                            <span slot="reference">
                                {{ scope.row.extend.substr(0, 20) + '...' }}
                            </span>
                        </ez-popover>
                    </span>
                    <span v-else>{{ scope.row.extend }}</span>
                </template>

默认是白色弹窗 如果需要修改自定义样式 需要自定义class 即

popper-class="workorder-problem-desc"

而且使用 popper-class 时 不能加scoped 加上不起作用 --- 为什么呢 我也不知道

.workorder-problem-desc {
    background-color: #303133 !important;
    color: #fff !important;
    border-color: #303133 !important;
}

其实还可以 修改 show-overflow-tooltip 样式 同样也不能加上 scoped

 .el-tooltip__popper{
    font-size: 14px;
     max-width:50%
}