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

x33g5p2x  于2021-11-22 转载在 Vue.js  
字(0.6k)|赞(0)|评价(0)|浏览(1015)

如果单纯只是为了省略内容,可以设置 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>

参考

  • Table-column Attributes | Element
  • 自定义列 | Avue
  • TextEllipsis 超出文本省略 | Avue

相关文章