基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件

最新推荐文章于 2024-09-03 16:56:52 发布

Hurt__

最新推荐文章于 2024-09-03 16:56:52 发布

阅读量1.5k

点赞数

分类专栏： element_ui

本文链接：https://blog.csdn.net/Hurt__/article/details/103912766

版权

本文介绍了一个基于 Element-UI 的自适应列宽的 table-column 组件——AFTableColumn。通过 npm 安装后，在 Vue 项目中引入并使用，提供全局和局部配置，调整不同字符类型的字体比例和字体大小，以实现表格列的自适应宽度。

摘要由CSDN通过智能技术生成

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

安装
npm install af-table-column
使用
注意: 需要事先引入 Vue 和 Element-UI 依赖库, 并在组件下使用该组件

// 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">