基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件

原文链接:https://www.ctolib.com/legendJaden-AFTableColumn.html#articleHeader1

af-table-column

---

简介

基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能

安装

npm install af-table-column

使用

注意: 需要事先引入 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

• 部分不适应列宽, 两种写法

// list.vue

部分自适应列宽:

// list.vue
// 实现仅有 列2 自适应

暂不支持的用法: column 的自定义内容中存在过于复杂的组件, 如:

因为组件暂时不能考虑到所有的自定义情况并计算元素实际宽度

配置项

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

备注: 可缺省任意字段, 组件将使用默认值.