Avue-crud 表格组件列文字过长省略并展示指定行数

勤为径苦作舟

已于 2023-09-27 11:43:39 修改

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 vue.js elementui avue 表格table

于 2021-08-30 00:20:03 首次发布

本文链接：https://blog.youkuaiyun.com/duanluan/article/details/119988205

该博客介绍了如何在Avue框架中通过设置`overHidden`属性和使用`TextEllipsis`组件来实现表格列内容的省略显示，并提供了具体的代码示例，展示了如何自定义列模板以达到内容超出省略的效果。

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

如果单纯只是为了省略内容，可以设置 option.column.xxx.overHidden 为 true。

给列添加 slot 为 true，然后自定义列的时候用 TextEllipsis 组件即可：

<avue-crud ref="crud"
           ……>
  <!-- 看这 -->
  <template slot="introduction" slot-scope="scope">
    <avue-text-ellipsis :text="scope.row.introduction" :height="100">
      <small slot="more">...</small>
    </avue-text-ellipsis>
  </template>
</avue-crud>

<script>
……
option:{
  column:[
	 ……,
     {
      label: '简介',
      prop: 'introduction',
      // 看这
      slot: true
    },
    ……
  ]
},
……
</script>