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

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

各种百度各种查,查了一些资料,发现有用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题库   小程序

相关文章
|
1月前
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
element ui实现多层级复杂表单的操作(添加与回显)之表单操作交互操作
33 0
|
1月前
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
156 0
|
19天前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
4天前
|
JavaScript
vue element ui 打开弹窗出现黑框问题
vue element ui 打开弹窗出现黑框问题
15 1
|
15天前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
20 2
|
19天前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
1月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
14 0
|
1月前
|
JSON 数据格式
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
element ui实现多层级复杂表单的操作(添加与回显)之添加功能实现
13 0
|
1月前
element-ui实现表格单选的功能
element-ui实现表格单选的功能
12 0
|
1月前
|
JavaScript 数据库
vue使用element ui实现下拉列表分页的功能!!!
vue使用element ui实现下拉列表分页的功能!!!
42 0

热门文章

最新文章