el-table 表头竖向排列实现 升级版
实现 Table 排列 el 表头 升级版
2023-09-11 14:17:22 时间
![](https://img2023.cnblogs.com/blog/1157512/202303/1157512-20230325162143827-461031640.jpg)
<div v-for="(item, index) in allItems" :key="index" class="mb20"> <div class="arrangeTitle mb10 mt10"> <headLine> <div class="title"> <div class="fb cor3" style="font-size: 20px"> {{ item.itemName }} </div> </div> </headLine> </div> <div class="mt10 mb10"></div> <!-- 系统外 --> <div class="my-self-table"> <el-table v-if="false" :data="item.evaluatorDtos" border> <el-table-column prop="evaluaterName" label="评价导入人" width="180" align="center" > </el-table-column> <el-table-column prop="appointmentTypeName" label="职位" width="180" align="center" > </el-table-column> <el-table-column prop="gradeStatusDesc" label="评价进度" align="center" > </el-table-column> </el-table> <div v-if="item.evaluatorDtos && item.evaluatorDtos.length > 0"> <!-- tableData :data="getValuesNew(item.evaluatorDtos)" --> <el-table style="width: 100%" :data="getValuesNew(item.evaluatorDtos)" :show-header="false" :cell-style="cellStyle" border > <el-table-column v-for="(item, index) in getHeadersNew(item.evaluatorDtos)" :key="index" :prop="item" min-width="150" > </el-table-column> </el-table> </div> </div> </div>
allItems: [],
headers: [
{
prop: 'appointmentTypeName',
// propObj: 'objName',
label: '先进企业',
},
{
prop: 'gradeStatusDesc',
label: '进步企业',
},
],
computed: {
getHeadersNew () {
return newTable => {
return newTable.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
}
},
getValuesNew () {
return newTable => {
console.log(this.headers)
console.log(newTable)
return this.headers.map(item => {
console.log(item)
let tableEnd = newTable.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: item.propObj ? cur[item.prop][item.propObj] : cur[item.prop] }), { 'title': item.label, });
return tableEnd
});
}
}
},
this.allItems = [
{
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼1",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "二般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼2",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}, {
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测2",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}, {
"evaluationObjectId": "597EDCC7DC6242DB8C22D77DA0F7F0D3",
"itemId": "6F1B901CAE01474F807F5DA209B99871",
"itemName": "测测2",
"scoreOriginType": 1,
"scoreOriginTypeDesc": "本系统内评分",
"evaluatorDtos": [
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
},
{
"evaluatorWithItemId": "7F0262BC9EC9494C9937F11A937B6EF7",
"evaluatorId": "ABB6F39831F143738875D0394C4C6D12",
"evaluater": "FCAF78CE4EA84847983AA4127C725A6C",
"evaluaterName": "余炼炼",
"scoredWeight": 100,
"raterGroupName": "先进企业",
"appointmentType": "100008",
"appointmentTypeName": "一般技术人员",
"gradeStatus": 2,
"gradeStatusDesc": "已提交"
}
]
}
]
相关文章
- Vue + element-ui 【前端项目一】Table 表格并实现分页 2
- antd Table 实现不可勾选
- 【MATLAB教程案例30】基于MATLAB的图像阴影检测和消除算法的实现
- 光伏电池组 局部阴影时输出模型 P-U曲线 I-U曲线 simulink实现 MPPT-Model
- Kind & Kubernetes 实现自动扩容和自愈应用实践
- Allegro172版本如何用自带的功能实现快速在1MMBGA下方等距放置电容
- C#【必备技能篇】Winform实现多语言切换(.resx文件的应用)
- CSS简介代码实现表格(table)只有横线没有竖线的效果,一个简约卡片化精美的数据表格(类似Bootstrap表格)
- vxe-table 实现表格填写自动计算且限制数值的复杂操作
- 储物柜soket通信协议和中间件实现技术细节
- vue 使用element-ui实现table表单列展示与隐藏
- 【C语言】三种方法模拟实现strlen函数
- Element Table齿轮实现列字段显示与隐藏渲染异常(行列错乱)的解决方案
- 【详解】线程池及其自定义线程池的实现
- [yueqian_scut]蓝牙防丢器原理、实现与Android BLE接口编程
- SwiftUI 手势之实现全平台点击效果透明按钮(教程含源码)
- 如何使用JS实现一个录屏功能
- table表格实现图片头像上传
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
- JS排序:localeCompare() 方法实现中文排序、sort方法实现数字英文混合排序
- 【树与二叉树】二叉树链式结构及实现--万字详解介绍
- bootstrap table 实现固定悬浮table 表头并可以水平滚动
- JAVA NIO non-blocking模式实现高并发服务器(转)
- Unity 基础 之 IDragHanlder 简单实现 UGUI 元素随着鼠标移动,拖动的效果
- Android框架Volley使用:Json请求实现
- Mysql error.log报错:Error: Table “mysql”.“innodb_table_stats” not found
- Bootstrap Table实现表格高度随着窗口大小而改变,从而显示表格滚动条,以保证分页条始终停留在下方 李北北 关注