af-table-column

af-table-column: auto fit table column, 自适应宽度的列组件

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
af-table-column
1.0.34 years ago5 years agoMinified + gzip package size for af-table-column in KB

Readme

简介

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

安装

``` npm install af-table-column ```

使用

注意: 需要事先引入 VueElement-UI 依赖库, 并在 <el-table></el-table> 组件下使用该组件
``` // main.js import Vue from 'vue' import ElementUI from 'element-ui' import AFTableColumn from 'af-table-column' Vue.use(AFTableColumn) ```
  • 默认用法, 全部自适应列宽
``` // list.vue
<af-table-column label="列1" prop="field1"></af-table-column>
<af-table-column label="列2" prop="field2"></af-table-column>
<!--也支持简单的自定义内容-->
<af-table-column label="列3">
<template slot-scope="scope">
<div>自定义显示值31: {{ scope.row.field31 }}</div>
<div>自定义显示值32: {{ scope.row.field32 }}</div>
</template>
</af-table-column>
<af-table-column label="操作">
<template slot-scope="scope">
<el-button @click="removeItem">删除</el-button>
</template>
</af-table-column>
```
  • 部分不适应列宽, 两种写法:
``` // list.vue
<!--1. 设置 fit 属性为 false-->
<af-table-column label="列1" prop="field1" :fit="false"></af-table-column>
<!--2. 使用 `ElementUI` 原有的 `el-table-column`-->
<el-table-column label="列2" prop="field2"></el-table-column>
```
  • 部分自适应列宽:
``` // list.vue // 实现仅有 列2 自适应
<af-table-column label="列1" prop="field1"></af-table-column>
<!--在 column 上设置 fit 属性为 true-->
<af-table-column label="列2" prop="field2" fit></af-table-column>
<el-table-column label="列1" prop="field1"></el-table-column>
<af-table-column label="列2" prop="field2"></af-table-column>
```
暂不支持的用法:
column 的自定义内容中存在过于复杂的组件, 如:
```
</template>
```
因为组件暂时不能考虑到所有的自定义情况并计算元素实际宽度

配置项

  1. fontRate:
自适应列宽时三种字符的字体比例 | 字符 | 字段 | 默认值 | | ---- | ---- | ---- | | 汉字 | CHARRATE | 1.1 | | 数字 | NUMRATE | 0.65 | | 其他 | OTHERRATE | 0.5 |
  1. fontSize:
字体大小px值, 用于计算各种字符占的像素宽度, 默认为 14
注意: 此字段并非控制样式的 font-size
``` // 全局配置 // main.js // 定义字体比例 const fontRate = { CHAR
RATE: 1.1, // 汉字比率 NUMRATE: 0.65, // 数字 OTHERRATE: 0.8 // 除汉字和数字以外的字符的比率 } const fontSize = 16 // 注册组件 Vue.use(AFTableColumn, { fontRate, fontSize }) // 局部配置 // 以上字段也可作为组件的属性, 用于单独设置对应列 // list.vue
<af-table-column :fontSize="20" label="列1" prop="field1"></af-table-column>
<af-table-column :fontRate="fontRate" label="列2" prop="field2"></af-table-column>
```
备注: 可缺省任意字段, 组件将使用默认值.