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

原创于 2020-08-28 17:05:55 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

数据处理专栏收录该内容

25 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表显示限制部分内容：

<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
    }
  },