使用element UI-table表格列宽自适应【已解决】

以你之姓@ 2023-01-16 11:08 278阅读 0赞

各种百度各种查，查了一些资料，发现有用width的有自己写的，一大堆看不懂

最后用   [af-table-column][]   解决

在el-table中使用

1）安装

npm install af-table-column

2）在main.js中引用

import Vue from 'vue'
    import ElementUI from 'element-ui'
    //需要按需引入，先引入vue并引入element-ui
    import AFTableColumn from 'af-table-column'
     
    Vue.use(AFTableColumn)

3）在el-table中使用

<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>
      //也支持element-ui原有的el-table-column
        <el-table-column  label="操作">
          <template slot-scope="scope">
            <el-button @click="removeItem">删除</el-button>
          </template>
        </el-table-column >
        //af-table-column 和el-table-column 可以同时在一个表格中使用
      </el-table>
    </template>

看前端面试题  大全    MST题库   小程序

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70][]

[af-table-column]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FlegendJaden%2FAFTableColumn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4MTU2MA_size_16_color_FFFFFF_t_70]: /images/20221022/dbf5d1a8b16046b19c1850f7aaf14a98.png