vue中使用element-ui的表格时,对数据的处理

    <el-table
      :data="tableData"
      :header-cell-style="tableHeaderColor"
      height="95%"
      :cell-style="cellStyle"
      style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column
        label="日期">
        <el-table-column  prop="operDate" :formatter="formatDate" width="70">
        </el-table-column>
      </el-table-column>
      <el-table-column
        label="产品型号" width="50">
        <el-table-column prop="hjnd" >
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋链速" width="100" >
        <el-table-column
          prop="pllsSet"
          label="设定" width="50">
        </el-table-column>
        <el-table-column
          prop="pllsActrul"
          label="实际" width="50">
        </el-table-column>
      </el-table-column>
      <el-table-column label="喷淋风刀频率"  width="120" >
        <el-table-column
          prop="plfdSet"
          label="设定" width="60">
        </el-table-column>
        <el-table-column
          prop="pllsActrul"
          label="实际" width="60">
        </el-table-column>
      </el-table-column>
      <el-table-column
        width="50"
        label="氧气浓度">
        <el-table-column  prop="o2nd" >
        </el-table-column>
      </el-table-column>
      <el-table-column
        width="50"
        label="氮气浓度" >
        <el-table-column prop="n2nd" >
        </el-table-column>
      </el-table-column>
      <el-table-column label="干燥炉" width="300" >
        <el-table-column label="1区" width="100" >
          <el-table-column
            prop="gzl1Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="gzl1Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" align='center'>
          <el-table-column
            prop="gzl2Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="gzl2Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="gzl3Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="gzl3Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="预热炉" width="300" >
        <el-table-column label="1区" width="100" >
          <el-table-column
            prop="yrl1Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="yrl1Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100" >
          <el-table-column
            prop="yrl2Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="yrl2Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" >
          <el-table-column
            prop="yrl3Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="yrl3Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="钎焊炉" width="400" >
        <el-table-column label="1区" width="100" >
          <el-table-column
            prop="qhl1Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="qhl1Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="2区" width="100">
          <el-table-column
            prop="qhl2Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="qhl2Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="3区" width="100" align='center'>
          <el-table-column
            prop="qhl3Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="qhl3Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
        <el-table-column label="4区" width="100" >
          <el-table-column
            prop="qhl4Set"
            label="设定" width="50">
          </el-table-column>
          <el-table-column
            prop="qhl4Actrul"
            label="实际" width="50">
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    
    要对后端传来的时间进行处理
    // 用来格式化内容
    formatDate(value){
      return value.operDate+':00'
    },
    
重点的代码:
例后端返回的operDate:‘14’,前端需要的格式是“14:00”
在要处理的数据的el-table-column行内写上:formatter="formatDate",在methods里写上
 formatDate(value){
      return value.operDate+':00'
    },复制代码
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值