VUE el-table-column 和Arco Design 富文本超出隐藏

凄凉山谷的风 OL

已于 2024-05-04 11:55:50 修改

阅读量540

点赞数

文章标签： vue

于 2022-11-03 14:45:58 首次发布

嘎嘎淘

本文链接：https://blog.csdn.net/zhang804633234/article/details/127670168

版权

el-table-column 使用标签

:show-overflow-tooltip='true'

多图展示

   <el-table-column label="支付图片" align="center" width="265px">
        <template slot-scope="scope">
            <span v-for="(item,index) in scope.row.uploadImgs" :key="index">
                <el-popover placement="left" trigger="click" width="300">
                    <img :src="item" width="100%" />
                    <img
                        slot="reference"
                        :src="item"
                        :alt="item"
                        style="max-height: 70px;max-width: 70px; padding: 5px"
                    />
                </el-popover>
            </span>
        </template>
    </el-table-column>

Arco Design 超出设置

 <template #product_info="{ record }">
          <a-tooltip :content="record.product_info" :show-overflow-tooltip="true">
             <div class="overflow-hidden">
              <div class="content">{{record.product_info}}</div>
            </div>
          </a-tooltip> 
           
 </template>

<style>
.overflow-hidden {
  max-width: 200px; /* 设置最大宽度 */
  max-height: 20px;
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 防止换行 */
}
</style>