el-table-column 显示两行数据，多了显示省略号，hover展示全部效果，数据不多，hover不需要展示

效果图（多出,,,hover出现全文，否则鼠标移上去没反应）

 html

<el-table-column label="释义" prop="remark">
                <template slot-scope="scope">
                  <el-popover
                    trigger="hover"
                    placement="top"
                    width="300"
                    :disabled="isShowPoppver(scope.row.remark, 24)"
                  >
                    <p style="max-width: 300px">{{ scope.row.remark }}</p>
                    <div slot="reference" class="ellipsis">
                      {{ scope.row.remark | ellipsis(20) }}
                    </div>
                  </el-popover>
                </template>
</el-table-column>

computed

  computed: {
    isShowPoppver() {
      return function (val, limit) {
        if (val && val.length >= limit) {
          return false;
        } else {
          return true;
        }
      };
    },
  },

filters

filters: {
    ellipsis(value, limit) {
      if (!value) return "无数据";
      else if (value.length > limit) {
        return value.slice(0, limit) + "...";
      } else {
        return value;
      }
    },
  },

css

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}