element-ui中Popover 弹出框

有时在表格中会因为单元格的宽度过小，或者内容过多会换行，这样列表看起来有的行会高，有的行会矮，整体看起来不太和谐，也不美观

效果图

代码实现

        <el-table-column label="公告内容" align="center" prop="noticeContent">
            <template slot-scope="scope">
              <el-popover
                width="400"
                placement="right"
                trigger="hover"
                :content="scope.row.noticeContent"
                popper-class="popover-content"
              >
                <div slot="reference" class="ellipsis">
                  {{ scope.row.noticeContent }}
                </div>
              </el-popover>
            </template>
        </el-table-column>
        
        <style lang="scss">
            .popover-content {
              max-height: 200px;
              overflow: auto;
              overflow-x: hidden;
            }

            .ellipsis {
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
            }
        </style>