Element的展示数据超过固定数之和展示...，使用js实现

最新推荐文章于 2024-06-18 15:04:21 发布

原创最新推荐文章于 2024-06-18 15:04:21 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

数据处理专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在列表中优雅地显示长内容的方法，通过使用Vue的popover组件结合自定义过滤器，实现当内容过长时显示省略号及悬浮预览完整信息的功能。

部署运行你感兴趣的模型镜像

列表显示限制部分内容：

<el-table-column label="部门" width="160">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{ scope.row.title }}</p>
            <div slot="reference" class="name-wrapper">
              <div size="medium">{{ scope.row.title | ellipsis }}</div>
            </div>
          </el-popover>
        </template>
      </el-table-column>

filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 12) {
        return value.slice(0, 12) + '...'
      }
      return value
    }
  },