# ex-table-column

**Repository Path**: stringcode/ex-table-column

## Basic Information

- **Project Name**: ex-table-column
- **Description**: 解决element el-table-column过长自动换行
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-06-01
- **Last Updated**: 2022-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ex-table-column
Extended from el-table-column. Automatically adjust column width according to content. Keep all features of el-table-column.

## Features
- Automatically adjust column width according to content.
- Extended from el-table-column, keep all features of el-table-column.

## Using npm or yarn
```bash
$ npm install ex-table-column --save
```

```bash
$ yarn add ex-table-column
```
## Demo
Clone repository and run:
```bash
$ yarn && yarn serve
```
## Required
- [element-ui](https://github.com/ElemeFE/element)
## Quick Start
``` javascript
import Vue from 'vue'
import Element from 'element-ui'
import ExTableColumn from 'ex-table-column';

Vue.use(Element)
Vue.component(ExTableColumn.name, ExTableColumn);
```
### Simple use
Replace `<el-table-column />` to `<ex-table-column>`, add prop `:autoFit='true'`:
``` javascript
<el-table>
  <ex-table-column
    :autoFit='true'
  />
</el-table>
```
And add style:
``` css
.el-table .cell {
  white-space: nowrap;
  width: fit-content;
}
```
### Complicated slot
Add prop `fitByClass` to specify a class of the element, which is in slot component, and use to calculate the column width:
``` javascript
<el-table>
  <ex-table-column
    :autoFit='true'
    fitByClass="auto-fit-target"
    :fitGap="20"
  >
    <div class="column-wrapper" slot-scope="scope">
      <div class="column-content auto-fit-target">
        {{scope.row[scope.column.property]}}
      </div>
    </div>
  </ex-table-column>
</el-table>
```
Make sure that the element choosed by `fitByClass`, the width of the element is correct, maybe you should add `white-space: nowrap;
  width: fit-content;` for the element.
## Extend prop

| Prop | Description | Type | Accepted Values | Default | 
| --- | --- | --- | --- | --- |
| autoFit | whether column width to be automatically adjusted according to content, if set to be false, the behaves of `<ex-table-column />` will be same as `<el-table-column>`. | boolean | - | false
| fitByClass | Specify the class of the element that determines the width | string | - | cell
| fitGap | The content right margin | number | - | 0