# [af-table-column](https://github.com/legendJaden/AFTableColumn)

### 简介
基于 `element-ui` 组件库的 `el-table-column` 组件, 支持自适应列宽功能
### 安装
```
npm install af-table-column
```

### 使用
> 注意: 需要事先引入 `Vue` 和 `Element-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
<template>
  <el-table :data="data">
    
    <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>
    
  </el-table>
</template>
```

- 部分不适应列宽, 两种写法:
```
// list.vue
<template>
  <el-table :data="data">
    <!--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>
  </el-table>
</template>
```

- 部分自适应列宽:
```
// list.vue
// 实现仅有 列2 自适应
<template>
  <!--在 table 上设置 autoFit 属性为 false-->
  <el-table :data="data" :autoFit="false">
    <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>
</template>

<!--或者其他列使用 ElementUI 原有的 el-table-column-->
<template>
  <el-table :data="data">
    <el-table-column label="列1" prop="field1"></el-table-column>
    <af-table-column label="列2" prop="field2"></af-table-column>
  </el-table>
</template>
```

> 暂不支持的用法:
> `column` 的自定义内容中存在过于复杂的组件, 如:
> ```
> <el-table>
>   <af-table-column>
>     <template slot-scope="scope">
>       
>       <el-form>
>         <el-form-item label="输入框" prop="inputField">
>           <el-input v-model="formData.inputField"></el-input>
>         </el-form-item>
>         <el-form-item label="选择框" prop="selectField">
>           <el-select v-model="formData.selectField">
>             <el-option :label="选项1" :value="value1"></el-option>
>             <el-option :label="选项2" :value="value2"></el-option>
>             <el-option :label="选项3" :value="value3"></el-option>
>           </el-select>
>         </el-form-item>
>       </el-form>
>       
>     </template>
>   </af-table-column>
> </el-table>
> ```
> 因为组件暂时不能考虑到所有的自定义情况并计算元素实际宽度

### 配置项
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
<template>
  <el-table>
    <af-table-column :fontSize="20" label="列1" prop="field1"></af-table-column>
    <af-table-column :fontRate="fontRate" label="列2" prop="field2"></af-table-column>
  </el-table>
</template>
<script>
  export default {
    data () {
      return {
        fontRate: {
          OTHER_RATE: 1.5
        },
      }
    }
  }
</script>
```
> 备注: 可缺省任意字段, 组件将使用默认值.