代码拉取完成，页面将自动刷新
Extended from el-table-column. Automatically adjust column width according to content. Keep all features of el-table-column.
$ npm install ex-table-column --save
$ yarn add ex-table-column
Clone repository and run:
$ yarn && yarn serve
import Vue from 'vue'
import Element from 'element-ui'
import ExTableColumn from 'ex-table-column';
Vue.use(Element)
Vue.component(ExTableColumn.name, ExTableColumn);
Replace <el-table-column /> to <ex-table-column>, add prop :autoFit='true':
<el-table>
<ex-table-column
:autoFit='true'
/>
</el-table>
And add style:
.el-table .cell {
white-space: nowrap;
width: fit-content;
}
Add prop fitByClass to specify a class of the element, which is in slot component, and use to calculate the column width:
<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.
| 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 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手