elementUI实现table表格的自定义列标题及自定义列宽

首先 el-table设置自定义标题

自定义数据结构=>tableTitle

//js 
let tableTitle = [
    {prop:'number',label:'序号'}
    ...
]
//vue template
<el-table
   :stripe="true"
   size='medium'
   :data="tableData"
   style="width: 100%;height:100%;"
   :max-height="520"
>
       <el-table-column
           v-for="item in tableTitle"
           :key="item.prop"
           :label="item.label"
           :property="item.prop"
           align="center"
           :class="item.prop" 
       >
                   
       </el-table-column>
       
<el-table>

既然每列标题可以通过自定义设置。那同样在自定义数据结构中，放入css数据，再配合el-table中的width属性，实现自定义列宽.

// js 添加一个字段
let tableTitle = [
    {prop:'number',label:'序号',csss:'100px'}
    ...
]
// vue template
...
       <el-table-column
           v-for="item in tableTitle"
           :key="item.prop"
           :label="item.label"
           :property="item.prop"
           align="center"
           :class="item.prop" 
           :width="item.csss"       // 设置列宽
       >
                   
       </el-table-column>
...