element动态列

最新推荐文章于 2025-06-12 10:39:14 发布

原创最新推荐文章于 2025-06-12 10:39:14 发布 · 834 阅读

2 ·

CC 4.0 BY-SA版权

element 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用Element UI组件库在Vue.js中展示集装箱及其增值服务信息的方法。通过自定义表格列，实现了对集装箱类型、箱号、目的站及增值服务状态的详细展示。根据不同服务状态，表格单元格背景色变化，直观显示服务申请状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <el-table :data="tabServerList" style="width: 100%;margin-top:20px;">
    <el-table-column label="集装箱信息" header-align="center">
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="containerTypeName" label="箱型" width="130" align="center">
      </el-table-column>
      <el-table-column label="箱号" width="160" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.orderContainer==null?'':scope.row.orderContainer.containerNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的站" width="160" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.unloadStation.cnName}}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="增值服务信息" header-align="center">
      <el-table-column
        v-for="(list,indexs) in addServiceList"
        :key="indexs"
        :label="list.serviceName"
        :prop="addService"
        align="center"
      >
        <template slot-scope="scope" align="center">
          <div style="background-color: rgb(182,219,252);color: rgb(255,255,255)" v-if='scope.row.addService[indexs].addServiceId!=0 && scope.row.addService[indexs].serviceStatus>1'>已选</div>
          <div style="background-color: lawngreen;color: rgb(255,255,255)" v-if='scope.row.addService[indexs].addServiceId!=0 && scope.row.addService[indexs].serviceStatus==0'>申请新增</div>
          <div style="background-color: orangered;color: rgb(255,255,255)" v-if='scope.row.addService[indexs].addServiceId!=0 && scope.row.addService[indexs].serviceStatus==1'>申请取消</div>
          <div style="background-color: rgb(242,242,242);color: rgb(204,204,204)"  v-if='scope.row.addService[indexs].addServiceId==0'>未选</div>
        </template>
      </el-table-column>

    </el-table-column>
  </el-table>
</template>

// 表格数据
this.tabServerList=[]
for (var i = 0; i < this.orderAddServicesList.length; i++) {
  var orders = this.orderAddServicesList[i];
  if (this.tabServerList.length == 0) {
    var obj = {
      rowFlag: orders.rowFlag,
      containerTypeName: orders.containerTypeName,
      unloadStation: {
        id: orders.unloadStation.id,
        cnName:orders.unloadStation.cnName
      },
      orderContainer:{
        id:orders.orderContainer==null?'':orders.orderContainer.id,
        containerNo:orders.orderContainer==null?'':orders.orderContainer.containerNo
      },
      addService: []
    };
    for (var k = 0; k < this.addServiceList.length; k++) {
      if (this.addServiceList[k].id == orders.addService.id) {
        obj.addService.push({ id:orders.id,addServiceId: orders.addService.id,serviceStatus: orders.serviceStatus,flag:'agreeCancel'});
      } else {
        obj.addService.push({ id: 0,addServiceId: 0,serviceStatus: '',flag:''});
      }
    }
    this.tabServerList.push(obj);
  } else {
    let flag = false
    let num = 0;
    for (var j = 0; j < this.tabServerList.length; j++) {
      if (orders.rowFlag == this.tabServerList[j].rowFlag) {
        flag = true;
        num = j
        break
      }
    }
    if(flag){
      for (var k = 0; k < this.addServiceList.length; k++) {
        if (this.addServiceList[k].id == orders.addService.id) {
          this.tabServerList[num].addService.splice(k, 1, {
            id: orders.id,
            addServiceId: orders.addService.id,
            serviceStatus: orders.serviceStatus,
            flag:'agreeCancel'
          });
        }
      }
    }else{
      var obj = {
        rowFlag: orders.rowFlag,
        containerTypeName: orders.containerTypeName,
        unloadStation: {
          id: orders.unloadStation.id,
          cnName:orders.unloadStation.cnName
        },
        orderContainer:{
          id:orders.orderContainer==null?'':orders.orderContainer.id,
          containerNo:orders.orderContainer==null?'':orders.orderContainer.containerNo
        },
        addService: []
      };
      for (var k = 0; k < this.addServiceList.length; k++) {
        if (this.addServiceList[k].id == orders.addService.id) {
          obj.addService.push({ id: orders.id,addServiceId: orders.addService.id,serviceStatus: orders.serviceStatus,flag:'agreeCancel'});
        } else {
          obj.addService.push({ id: 0,addServiceId: 0,serviceStatus: '',flag:''});
        }
      }
      this.tabServerList.push(obj);
    }
  }
}