element表格table头部循环设置列的宽度

今天在维护一个旧的的项目时，表格数据真的是一坨*一样

它用了一个for循环去循环el-table-column然后没给宽度，下面看一下没给宽度的样式

在看一下解决之后的样子

这是之前有问题的

<el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55" align="center" />
   <el-table-column v-for="(item, key) in tableCol" :key="key" :label="item.title" align="center">
     <template slot-scope="scope">
       <p v-if="item.prop === 'releaseEnvironment'">{{ scope.row['releaseEnvironment'] === 1 ? '生产环境' : '预生产环境' }}</p>
       <p v-if="item.prop === 'title'" class="titleCss">{{ scope.row['title'] }}</p>
       <div v-if="item.prop === 'appendix' && scope.row['appendix']">
         <a v-for="(item, index) in scope.row['appendix'].split(',')"  :href="item" :download="item">{{ item }}</a>
       </div>
       <p v-if="item.prop !== 'appendix' && item.prop !== 'releaseEnvironment' && item.prop !== 'title'" v-html="scope.row[item.prop]"></p>
     </template>
   </el-table-column>
   <el-table-column width="260" label="操作" align="center" fixed="right">
     <template slot-scope="scope">
       <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
       <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
     </template>
   </el-table-column>
 </el-table>

解决之后的代码

<el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55" align="center" />
   <el-table-column v-for="(item, key) in tableCol" :key="key" :label="item.title" :width="item.width" align="center">
   <!-- ************** :width="item.width" 把宽度加上去 tableCol里也要添加宽度属性*************-->
     <template slot-scope="scope">
       <p v-if="item.prop === 'releaseEnvironment'">{{ scope.row['releaseEnvironment'] === 1 ? '生产环境' : '预生产环境' }}</p>
       <p v-if="item.prop === 'title'" class="titleCss">{{ scope.row['title'] }}</p>
       <div v-if="item.prop === 'appendix' && scope.row['appendix']">
         <a v-for="(item, index) in scope.row['appendix'].split(',')" :href="item" :download="item">{{ item }}</a>
       </div>
       <p v-if="item.prop !== 'appendix' && item.prop !== 'releaseEnvironment' && item.prop !== 'title'" v-html="scope.row[item.prop]"></p>
     </template>
   </el-table-column>
   <el-table-column width="160" label="操作" align="center" fixed="right">
     <template slot-scope="scope">
       <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
       <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
     </template>
   </el-table-column>
 </el-table>

tableCol: [
   {
     prop: 'releaseSystem',
     width: '150', // ************ 每一列都要加上去
     title: '发布系统'
   },
   {
     prop: 'releaseEnvironment',
     width: '120', // ************ 每一列都要加上去
     title: '发版环境'
   },
   {
     prop: 'title',
     width: '200', // ************ 每一列都要加上去
     title: '标题'
   },
   {
     prop: 'releaseContent',
     width: '400', // ************ 每一列都要加上去
     title: '发版内容'
   },
   {
     prop: 'appendix',
     width: '220',
     title: '附件'
   },
   {
     prop: 'creater',
     width: '150',
     title: '创建人'
   },
   {
     prop: 'createAt',
     width: '150',
     title: '创建时间'
   }
 ],