af-table-column: auto fit table column, 自适应宽度的列组件
npm install af-table-columnelement-ui 组件库的 el-table-column 组件, 支持自适应列宽功能
npm install af-table-column
`
$3
> 注意: 需要事先引入 Vue 和 Element-UI 依赖库, 并在 组件下使用该组件
`
// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)
`
- 默认用法, 全部自适应列宽
`
// list.vue
自定义显示值31: {{ scope.row.field31 }}
自定义显示值32: {{ scope.row.field32 }}
删除
`
- 部分不适应列宽, 两种写法:
`
// list.vue
`
- 部分自适应列宽:
`
// list.vue
// 实现仅有 列2 自适应
`
> 暂不支持的用法:
> column 的自定义内容中存在过于复杂的组件, 如:
> `
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> `
> 因为组件暂时不能考虑到所有的自定义情况并计算元素实际宽度
$3
1. fontRate:
自适应列宽时三种字符的字体比例
| 字符 | 字段 | 默认值 |
| ---- | ---- | ---- |
| 汉字 | CHAR_RATE | 1.1 |
| 数字 | NUM_RATE | 0.65 |
| 其他 | OTHER_RATE | 0.5 |
2. fontSize:
字体大小px值, 用于计算各种字符占的像素宽度, 默认为 14
> 注意: 此字段并非控制样式的 font-size
`
// 全局配置
// main.js
// 定义字体比例
const fontRate = {
CHAR_RATE: 1.1, // 汉字比率
NUM_RATE: 0.65, // 数字
OTHER_RATE: 0.8 // 除汉字和数字以外的字符的比率
}
const fontSize = 16
// 注册组件
Vue.use(AFTableColumn, { fontRate, fontSize })
// 局部配置
// 以上字段也可作为组件的属性, 用于单独设置对应列
// list.vue
``