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

说是基于 element-ui 二次封装，从这个组件我是没看出来。element-ui 的 Table 组件有个专门的列属性 show-overflow-tooltip，设置一下就好了。而在 Avue 当中要如何设置呢？因为它专门有个 TextEllipsis（超出文本省略）组件，所以表格那边它就没有，只能自定义列，我个人觉得还是挺麻烦的。给列添加 slot 为 true，然后自定义列的时候用 T

勤为径苦作舟

4037人浏览 · 2021-08-30 00:20:03

勤为径苦作舟 · 2021-08-30 00:20:03 发布

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

参考

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^