el-table写死 编辑宽度so easy

     <el-table-column label="报警类型" prop="status" width：'180'>
        <template slot-scope="{row}">
          <span v-if="row.status === 0" class="warning-color">故障</span>
          <span v-if="row.status === 1" class="danger-color">报警</span>
          <span v-if="row.status === 2" class="active-color">正常</span>
          <span v-if="row.status === 4" class="warning-color">离线</span>
          <span v-if="row.status === -1" class="gray-color">未启动</span>
        </template>
      </el-table-column>
      <el-table-column label="设备编号" prop="code"  width：'100'>
      </el-table-column> 
     <el-table-column label="所属系统" prop="systemName"/>
      <el-table-column label="位置描述" prop="addressDesc"  width：'100'>
        <template slot-scope="{row}">
          <span class="text-ellipsis" :title="row.addressDesc">{{row.addressDesc}}</span>
        </template>
      </el-table-column> 

但是动态绑定的el-table就不能自己识别width

以下是表格每列的label，props，width

// field_ch=>表格字段的中文名，field_en=>表格字段的英文名 ，field_type=>表格字段的数据类型，field_width=>表格字段的宽度
this.field_ch = ["所属单位", "AI厂商", "报警详情", "图片", "设备名", "设备编号", "设备类型", "报警类型", "报警时间", "是否确认", "确认人", "确认时间", "确认结果"];

this.field_en = ["deptName","manufacturerName","manufacturerId", "picUrl", "videoName", "videoNo", "videoTypeName", "alarmTypeName", "alarmTime", "status", "disposeUserName", "restoreTime", "alarmInfoName"];

this.field_width = ["100","80","80", "200", "", "100", "", "100", "100", "80", "100", "100", "80"];
           
 for (var i=0;i<this.field_ch.length;i++){
              this.checkedTableColumn.push({value:this.field_en[i],label:this.field_ch[i],width:this.field_width[i]})
            }

el-table表格的动态循环。

 <el-table-column v-for="(item,index)  in checkedTableColumn" 
    :key="index" :label="item.label" :width="item.width">
               <template slot-scope="scope" >
                 <div v-if="item.value=='manufacturerName'">
                   <span>xxxxx</span>
                 </div>
                 <div v-else-if="item.value=='manufacturerId'">
                   <span class="green_color" @click="detailClick(scope.row)">查看详情</span>
                 </div>
                 </div>
                 <div v-else-if="item.value=='alarmTypeName'">
                    <span class="red_color">{{ scope.row[item.value]}}</span>
                 </div>
                 <div v-else> {{ scope.row[item.value] }} </div>
              </template> 
</el-table-column>

:width="item.width" 无法识别。。。

研究了一下~换了种写的方式:width绑定成一个方法

:width="checkTableWidth(index)"

checkTableWidth(index){
          return  this.checkedTableColumn[index].width
        },

它自定义的宽度就行了，