wanfeng010 2022-02-21 21:11 采纳率: 79.2%
浏览 216
已结题

vue element-ui 表格固定高度

问题遇到的现象和发生背景

使用的element-ui 表格模板查询出数据后,在简介一项数据过多导致自适应高度过高,有没有办法固定高度显示部分内容鼠标移到对应的位置上显示全部信息

img

在这里添加过style属性,但是没有效果

img

  • 写回答

3条回答 默认 最新

  • £漫步 云端彡 2022-02-22 10:04
    关注

    下面这段组件代码可以实现你想要的功能,最后面的docs是使用示例

    
    <template>
      <div class="tooltip-div" @mouseover="mouseover(`tooltip`)">
        <el-tooltip
          :disabled="disableTooltip"
          effect="light"
                :open-delay="openDelay"
          :popper-class="`tooltip${width}`"
        >
          <div slot="content" v-html="content"></div>
          <div class="details" :style="{ '-webkit-line-clamp': maxRow }">
            <label v-html="content" :ref="`tooltip`"></label>
          </div>
        </el-tooltip>
      </div>
    </template>
    
    <script>
    /**
     * 内容溢出提示组件,当内容溢出时,显示的浮窗提示,可复制,可控制行数
     * @description 内容溢出后的提示操作
     * @property {String} content 显示的完整内容,无默认值
     * @property {Number} maxRow 限制最大显示行数,默认值:2
     * @property {Number} width = [20|40|60|80|100] 提示框宽度,偶数值百分比制,默认40,%不写
     *
     * @displayName 溢出浮窗
     */
    export default {
      name: "overFlowToolTip",
      props: {
        /**
         * 显示的完整内容,不需要截取
         */
        content: String,
        /**
         * 最大显示行数
         */
        maxRow: {
          type: Number,
          default: 2,
        },
        /**
         * 浮窗宽度,百分比制数值
         * @values 20,40,60,80,100
         */
        width: {
          type: [String,Number],
          default: 40,
        },
            /**
             * 打开延时数,单位:ms
             */
            openDelay:{
                type: [String,Number],
                default: 1000,
            }
      },
      data: () => {
        return {
          // 是否禁用提示
          disableTooltip: true,
        };
      },
      methods: {
        mouseover(refName) {
          let parentHeight = this.$refs[refName].parentNode.offsetHeight;
          let contentHeight = this.$refs[refName].offsetHeight;
          // 判断是否开启tooltip功能
          if (parentHeight - contentHeight < 0) {
            this.disableTooltip = false;
          } else {
            this.disableTooltip = true;
          }
        },
      },
    };
    </script>
    
    <style>
    /**
         * 悬浮提示样式
         */
    .tooltip20 {
      border: 0 !important;
      background: #f8f8f9 !important;
      width: 20%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    
    .tooltip40 {
      border: 0 !important;
      background: #f8f8f9 !important;
      width: 40%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    
    .tooltip60 {
      border: 0 !important;
      background: #f8f8f9 !important;
      width: 60%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    
    .tooltip80 {
      border: 0 !important;
      background: #f8f8f9 !important;
      width: 80%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    
    .tooltip100 {
      border: 0 !important;
      background: #f8f8f9 !important;
      width: 100%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    
    /**
         * 小箭头样式
         */
    .tooltip20[x-placement^="top"] .popper__arrow,
    .tooltip20[x-placement^="top"] .popper__arrow:after {
      border-top-color: #9ea7b4 !important;
    }
    
    .tooltip20[x-placement^="bottom"] .popper__arrow,
    .tooltip20[x-placement^="bottom"] .popper__arrow:after {
      border-bottom-color: #9ea7b4 !important;
    }
    
    .tooltip20[x-placement^="left"] .popper__arrow,
    .tooltip20[x-placement^="left"] .popper__arrow:after {
      border-left-color: #9ea7b4 !important;
    }
    
    .tooltip20[x-placement^="right"] .popper__arrow,
    .tooltip20[x-placement^="right"] .popper__arrow:after {
      border-right-color: #9ea7b4 !important;
    }
    
    .tooltip40[x-placement^="top"] .popper__arrow,
    .tooltip40[x-placement^="top"] .popper__arrow:after {
      border-top-color: #9ea7b4 !important;
    }
    
    .tooltip40[x-placement^="bottom"] .popper__arrow,
    .tooltip40[x-placement^="bottom"] .popper__arrow:after {
      border-bottom-color: #9ea7b4 !important;
    }
    
    .tooltip40[x-placement^="left"] .popper__arrow,
    .tooltip40[x-placement^="left"] .popper__arrow:after {
      border-left-color: #9ea7b4 !important;
    }
    
    .tooltip40[x-placement^="right"] .popper__arrow,
    .tooltip40[x-placement^="right"] .popper__arrow:after {
      border-right-color: #9ea7b4 !important;
    }
    
    .tooltip60[x-placement^="top"] .popper__arrow,
    .tooltip60[x-placement^="top"] .popper__arrow:after {
      border-top-color: #9ea7b4 !important;
    }
    
    .tooltip60[x-placement^="bottom"] .popper__arrow,
    .tooltip60[x-placement^="bottom"] .popper__arrow:after {
      border-bottom-color: #9ea7b4 !important;
    }
    
    .tooltip60[x-placement^="left"] .popper__arrow,
    .tooltip60[x-placement^="left"] .popper__arrow:after {
      border-left-color: #9ea7b4 !important;
    }
    
    .tooltip60[x-placement^="right"] .popper__arrow,
    .tooltip60[x-placement^="right"] .popper__arrow:after {
      border-right-color: #9ea7b4 !important;
    }
    
    .tooltip80[x-placement^="top"] .popper__arrow,
    .tooltip80[x-placement^="top"] .popper__arrow:after {
      border-top-color: #9ea7b4 !important;
    }
    
    .tooltip80[x-placement^="bottom"] .popper__arrow,
    .tooltip80[x-placement^="bottom"] .popper__arrow:after {
      border-bottom-color: #9ea7b4 !important;
    }
    
    .tooltip80[x-placement^="left"] .popper__arrow,
    .tooltip80[x-placement^="left"] .popper__arrow:after {
      border-left-color: #9ea7b4 !important;
    }
    
    .tooltip80[x-placement^="right"] .popper__arrow,
    .tooltip80[x-placement^="right"] .popper__arrow:after {
      border-right-color: #9ea7b4 !important;
    }
    
    .tooltip100[x-placement^="top"] .popper__arrow,
    .tooltip100[x-placement^="top"] .popper__arrow:after {
      border-top-color: #9ea7b4 !important;
    }
    
    .tooltip100[x-placement^="bottom"] .popper__arrow,
    .tooltip100[x-placement^="bottom"] .popper__arrow:after {
      border-bottom-color: #9ea7b4 !important;
    }
    
    .tooltip100[x-placement^="left"] .popper__arrow,
    .tooltip100[x-placement^="left"] .popper__arrow:after {
      border-left-color: #9ea7b4 !important;
    }
    
    .tooltip100[x-placement^="right"] .popper__arrow,
    .tooltip100[x-placement^="right"] .popper__arrow:after {
      border-right-color: #9ea7b4 !important;
    }
    
    .tooltip-div {
      overflow: hidden;
    }
    
    /*溢出部分样式*/
    .details {
      width: 100%;
      height: 100%;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 7px;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    </style>
    <docs>
    <template>
      <div>
        <Tooltip :content="content" :maxRow="1"></Tooltip>
      </div>
    </template>
    <script>
      // 导入组件
      import Tooltip from './overflow-tooltip'
      export default {
        components: {
          Tooltip
        },
        data() {
          return {
            content: '人生因放下而精彩,放下自私,执念,元亨,在心底绽开一朵春节的莲花;让人生在宽容中释然一切,让心灵在禅意中回归,许放下,刹那花开'
          }
        }
      }
    </script>
    </docs>
    
    评论
  • leewen5 2022-02-22 10:12
    关注

    img


    只需要在表格的el-table-column上加show-overflow-tooltip属性就可以了

    <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
    
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月2日
  • 已采纳回答 2月22日
  • 创建了问题 2月21日

悬赏问题

  • ¥20 arcgis制做交通拥堵时变图
  • ¥15 AD20 PCB板步线 这个要怎么步啊
  • ¥50 关于《奇迹世界》1.5版本,数据修改
  • ¥15 请问这个问题如何解决(关键词-File)
  • ¥50 visual studio 2022和EasyX图形化界面
  • ¥15 找一下报错原因,纠正一下
  • ¥50 Cox回归模型Nomogram图制作报错
  • ¥20 SQL如何查询多级用户的数据
  • ¥15 给车牌识别代码加一个识别轮廓长宽比的代码
  • ¥30 商品价格预测的transformer模型优化