el-table-column 二次封装支持根据内容自适应宽度

自定义组件源码





简单说明

基本原理为根据内容中中文字符和其他字符的长度计算需要占用的宽度

标签内可用属性

1、格式化(自动计算格式化后的字符串长度):
:formatter="(row)=>{return row.cardId + 'WWwww'}"

2、过滤器(自动计算过滤器结果字符串的长度,只支持全局过滤器):
width-filter="createDate | getDateTimeFn1"
可支持多个过滤器:
width-filter="[createDate | getDateTimeFn1]   [createDate | getDateTimeFn1]"

3、自定义用来计算宽度的字符串,按照配置的内容计算宽度:
:width-str="'    '+$t('preDepositAcct.list.modify')+$t('cardManagement.delete')"

4、增加原组件不支持的最大宽度的配置:
max-width="200"

你可能感兴趣的:(vue.js,elementui,javascript,vue,html)