简单实现 element-ui table列宽自调整

记录一下表格列宽的自动调整

第一步先安装

npm install af-table-column

第二步在项目的main.js中引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)  //要先引用vue再引入elementui

第三步在表格中使用

<el-table stripe
      :data="pageTicket"
      style="width: 100%">
      <af-table-column
        prop="id"
        label="ID"
        
        >
      </af-table-column>
      <af-table-column
        prop="status"
        label="Status"
       >
      </af-table-column>
      <af-table-column
        prop="ticket_type"
        label="Type">
      </af-table-column>
      <af-table-column
        prop="submitted_time"
        label="Submitted Time">
      </af-table-column>
      <af-table-column
        prop="title"
        label="Title">
      </af-table-column>
    </el-table>

使用前:
简单实现 element-ui table列宽自调整_第1张图片

使用后:
简单实现 element-ui table列宽自调整_第2张图片

你可能感兴趣的:(element-ui,vue,elementui)