首页 > 其他分享 >element-plus table部分列根据接口返回key展示

element-plus table部分列根据接口返回key展示

时间:2024-05-17 14:07:35浏览次数:17  
标签:money element item num plus key getYearData data row

实现效果根据刷选年份返回对应年份作为部分列

1. 处理接口数据

  接口返回数据格式

  需要处理成

   处理过程

data.message && data.message.forEach((item:any)=>{
        let obj = {}
        for(var key in item){
            if(Number(key)){
                Object.assign(obj, {[key]: item[key]})
            }
            item.data = Object.assign(obj)
        }
    })
    state.yearcolumns = Array.from(new Set(data.message.flatMap((item:any) => Object.keys(item.data))))  //state.yearcolumns 输出[2023,2024]作为对应列标题
state.tableData = data.message

 表格渲染

<el-table :data="state.tableData" :border="true"  minHeight="1000" class='table-main'  @selection-change="handleSelectionChange" v-loading="state.tabLoading" element-loading-text="Loading..." :header-cell-style="state.headStyle" >
                    <el-table-column type="selection" label="全选" align="center" width="50" />
                    <el-table-column type="index" label="序号" align="center" width="80" />
                    <el-table-column prop="total_num" label="合同总个数" align="center" width="100" />
                    <el-table-column prop="total_contract_money" label="合同总金额" align="center" min-width="100" />
                    
                    <el-table-column v-for="(item,index) in state.yearcolumns" :key="item" :label="item+ '年'"  align="center" show-overflow-tooltip>
                      <el-table-column prop="num" label="合同个数" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, 'num', '') }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="contract_money" label="合同金额" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, 'contract_money', '') }}
                          </template>
                      </el-table-column>
                      <el-table-column prop="" label="已签订" align="center">
                        <el-table-column prop="" label="个数" align="center" width="70">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '已签', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金额" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '已签', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="" label="未签订" align="center">
                        <el-table-column prop="" label="个数" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '未签', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金额" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '未签', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                      <el-table-column prop="" label="不签订" align="center">
                        <el-table-column prop="" label="个数" align="center" width="80">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '不签', 'num') }}
                          </template>
                        </el-table-column>
                        <el-table-column prop="" label="金额" align="center" min-width="100">
                          <template #default="{ row }">
                            {{ getYearData(row, item, '不签', 'total_contract_money') }}
                          </template>
                        </el-table-column>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="{row}">
                            <el-button style="padding:0" text size='small' @click="openViewTasks(row)">可视化展示</el-button>
                        </template>
                    </el-table-column>

                </el-table>

 

const getYearData = (row:any, year:any, name:String, subName:any) =>{
  if(name == 'num'){
    return row.data[year].num || '--';
  }
  if(name == 'contract_money'){
    return row.data[year].contract_money || '0';
  }
  if(name == '已签' || '未签' || '不签'){
    let val = row.data[year].status.filter((item:any)=>item.iscontract==name)
    if(subName== 'num'){
      if(val.length != 0){
        return val[0].total_num
      }
    }
    if(subName== 'total_contract_money'){
      if(val.length != 0){
        return val[0].total_contract_money
      }
    }
  }
  // return
}

 

标签:money,element,item,num,plus,key,getYearData,data,row
From: https://www.cnblogs.com/xhrr/p/18197702

相关文章

  • Mybatis-plus多租户用例
    我们可以通过注解+配置实现项目多租户数据隔离注解定义:importjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Retention(RetentionPolicy.RUNTIME)@Target(......
  • mybatis-plus mapper整理
    mybatis-plusmapper整理简介提供了操作数据的框架,避免使用jdbc操作数据,加速开发效率,支持多种数据库(databaseId)。既支持sql,mapper的编写,也支持注解@Select等,同时提供了一二级缓存,以及BaseMapper接口以及IService、ServiceImpl这些接口,来提供模板化的方法。同时还支持逆向工程生......
  • { [key: string]: any } 是 TypeScript 中的一种类型注解
    {[key:string]:any} 是TypeScript中的一种类型注解,它描述了一个对象的类型。让我来解释一下这个类型注解,并举一个例子来说明它的用法。在TypeScript中,{[key:string]:any} 表示一个对象,其中键是字符串类型,而值可以是任意类型。{} 表示这是一个对象类型。[key:s......
  • 凯酷KEYCOOL键盘 Fn 功能快捷键和灯光调节
    Fn+Esc灯常亮Fn+F1打开此电脑Fn+F2打开此浏览器Fn+F3 打开计算器Fn+F4打开音乐库Fn+F5上一首歌Fn+F6下一首歌Fn+F7继续播放或暂停播放Fn+F8停止播放Fn+F9静音Fn+F10降低音量Fn+F11调高音量Fn+F12锁定键盘全部按......
  • LLM-通义千问:MyBatis-Plus 多租户插件
    MyBatis-Plus(简称MP)是一个对MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生。多租户(Multi-Tenant)是一种软件架构技术,它允许多个组织(即“租户”)共享同一应用程序的实例,但每个组织的数据都是隔离且私有的。在多租户场景下,MyBatis-Plus提供了一种插件......
  • vue3 elementplus样式
    科技感日期选择器样式.data_screen.el-picker-panel__footer{color:#87CEEB;background:#00122a;border-top:1pxsolid#274954;}.data_screen.el-picker-panel{color:#87CEEB;background:#00122a;border:1pxsolid#274954;}.data_screen.el-picker-pane......
  • apisix~authz-keycloak插件介绍
    参考:https://apisix.apache.org/docs/apisix/plugins/authz-keycloak/kc插件源码梳理及原理说明如果只是进行keycloak颁发的token进行校验(签名校验和有效期校验),那么我们可以使用jwt-auth这个插件实现,并且已经对这个插件进行二次开发,支持jwt内容解析与向下请求头的传递。作用......
  • MyBatis-Plus 实现多租户管理的实践
    本文主要讲解使用Mybatis-Plus结合dynamic-datasource来实现多租户管理在现代企业应用中,多租户(Multi-Tenant)架构已经成为一个非常重要的设计模式。多租户架构允许多个租户共享同一应用程序实例,但每个租户的数据彼此隔离。实现这一点可以大大提高资源利用率并降低运营成本。在本......
  • elementUI中Vue 2方式<el-table>表格中列表列头内容过长,不换行处理
    使用render-header属性<el-table-column...:render-header="headerRender"></el-table-column>methods:{headerRenderer(h,{column}){//使用h函数创建VNode,防止表头内容换行returnh('div',{style:{......
  • gorm实现MySQL的INSERT INTO ... ON DUPLICATE KEY UPDATE差异化插入和更新
    比如插入f_create_uid,更新时忽略f_create_uid,只更新f_update_uid。可使用gorm的BeforeCreate和BeforeUpdate钩子,这两个钩子分别在创建和更新记录之前被调用。//BeforeCreate在创建记录之前调用func(dob*MyStruct)BeforeCreate(tx*gorm.DB)(errerror){dob......