npm package: @kuaizi/kz-table
Description: It's set auto columns width to el-table, fit columns
Author: tommyshao
Latest version: 3.0.1

# kz-table

```
扩展element-ui 表格列宽自适应
```

## USAGE

```
import kzTable from '@kuaizi/kz-table'

// 默认标签名是el-table
// 重载el-table
Vue.component(kzTable.name, kzTable)
```


### All Columns auto-fit

add `auto-fit-column` and `fit-styles`

```
<el-table 
    :data="data"
    border
    auto-fit-column
    :fit-styles="styles"
  >
    <el-table-column
      label="姓名2222"
      prop="name"
      fixed
    ></el-table-column>
    <el-table-column
      label="年龄3333"
      prop="age"
    ></el-table-column>
    <el-table-column
      v-for="(option, index) in options"
      :label="option.label"
      :prop="option.prop"
      :key="index"
      sortable
      auto-fit
    ></el-table-column>
    <el-table-column
      label="年龄"
      width="100"
    >
      <template slot="header" slot-scope="slot">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>
    </el-table-column>
  </el-table>
```

## max-width

```html
<h2>Max-width</h2>
<el-table 
  :data="data"
  border
  auto-fit-column
>
  <el-table-column
    label="姓名2222"
    prop="name"
    fixed
  ></el-table-column>
  <el-table-column
    label="年龄3333"
    prop="age"
    :max-width="130"
  ></el-table-column>
  <el-table-column
    v-for="(option, index) in options"
    :label="option.label"
    :prop="option.prop"
    :key="index"
    :max-width="100"
    sortable
    auto-fit
  ></el-table-column>
  <el-table-column
    label="年龄"
    width="100"
  >
    <template slot="header">
      <el-input
        v-model="search"
        size="mini"
        placeholder="Type to search"/>
    </template>
  </el-table-column>
</el-table>
```

### add attribute `max-width`,not support v-bind

```
<el-table-column
    v-for="(option, index) in options"
    :label="option.label"
    :prop="option.prop"
    :key="index"
    max-width="100"
  ></el-table-column>
```

### use `table-column`

```
import kzTableColumn from './src/table-column'
Vue.component(kzTableColumn.name, kzTableColumn)

<el-table-column
    v-for="(option, index) in options"
    :label="option.label"
    :prop="option.prop"
    :key="index"
    :max-width="maxWidth"
  ></el-table-column>
```

#### js

```
export default {
  data () {
    return {
      options: [],
      styles: {
        header: 'font-size: 14px; font-weight: bold; padding: 0 10px;',
        body: 'font-size: 14px; padding: 0 10px;'
      }
    }
  }
}
```

### Some Columns auto-fit

add `auto-fit-column` 、 `fit-styles` and `fit-columns`

```
<el-table 
    :data="data"
    border
    auto-fit-column
    :fit-styles="styles"
    :fit-columns="fitColumns"
  >
    <el-table-column
      label="Name"
      prop="name"
      fixed
    ></el-table-column>
    <el-table-column
      label="Age"
      prop="age"
    ></el-table-column>
    <el-table-column
      label="Salary"
      prop="salary"
      :formatter="formatter"
    ></el-table-column>
    <el-table-column
      v-for="(option, index) in options"
      :label="option.label"
      :prop="option.prop"
      :key="index"
      sortable
      auto-fit
    ></el-table-column>
    <el-table-column
      label="年龄"
      width="100"
    >
      <template slot="header" slot-scope="slot">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>
    </el-table-column>
  </el-table>
```

#### js

```
export default {
  data () {
    return {
      options: [],
      styles: {
        header: 'font-size: 14px; font-weight: bold; padding: 0 10px;',
        body: 'font-size: 14px; padding: 0 10px;'
      },
      fitColumns: ['name', 'age', 'salary']
    }
  }
}
```

## Devlopmement

```
vue serve
```

## Build

```
vue build
```


---
(c) www.kuaizi.ai