vue elementui中el-table 动态合并行数组去重

数组下对象去重

// 去重
let obj={}
this.dataList=this.dataList.reduce((item,next)=>{obj[next.projectcode]?'':obj[next.projectcode]=true&&item.push(next)return item
},[])

el-table 改变第几行字体颜色

<el-table:data="dataList"borderstyle="width: 100%":span-method="objectSpanMethod":header-cell-style="tableHeaderColor"
>
</el-table>
// lable红色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {if (rowIndex === 1) { // 行return "color: red;";}
},

el-table 动态合并行

<el-table:data="dataList1"borderstyle="width: 100%":span-method="objectSpanMethod":header-cell-style="tableHeaderColor"
>
</el-table>// 合并
objectSpanMethods({ row, column, rowIndex, columnIndex }) {// console.log( row, column, rowIndex, columnIndex );if (column.label == "内容" ||column.label == "单价" ||column.label == "数量") {// console.log(columnIndex);} else {// console.log([columnIndex].includes(columnIndex));if ([columnIndex].includes(columnIndex)) {// console.log(this.rowspan);const _row = this.rowspan[rowIndex];const _col = _row > 0 ? 1 : 0; // 如果这一行隐藏了，这列也隐藏// console.log( _row,_col);return {rowspan: _row,colspan: _col,};}}
},
// 动态获取  第几行开始合并   合并几行
convertTableData() {let data = this.dataList1s;let arr = [];let rowspan = [];data.forEach((item) => {//debuggerfor (let i = 0; i < item.data.length; i++) {let rdata = {...item,...item.data[i],};rdata.combineNum = item.data.length;delete rdata.data;// rdata={ id: 1,name: "name-1",amount: 1003}arr.push(rdata);// 生成合并信息的数组 [3, 0, 0, 2, 0, 4, 0, 0, 0] 其中的0代表隐藏if (i == 0) {rowspan.push(item.data.length);} else {rowspan.push(0);}}});// console.log(arr)this.dataList1 = arr;// console.log(this.dataList1);// console.log(rowspan);this.rowspan = rowspan;
},
// 接收导入数据  在获取到数据后调用convertTableData()
getDataList1(val) {console.log(val);if (val) {val.map((item) => {this.dataList1s.push(item);});this.convertTableData();}
},

vue elementui中el-table 动态合并行数组去重相关推荐

Web前端-Vue ElementUI点击Table 索引行获取index处理
需求:在table中row行 index = 0 ,作为区头,数据字符展示 "--" 参考组件 Element - The world's most popular Vue UI ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...
Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
ElementUI中为table增加小计/合计
ElementUI中只有为表格增加一个合计的功能,但是有些时候可能会遇到同时增加小计/合计的功能,可以利用slot='append'去实现多个合计功能. 文章地址: ElementUI中为table增 ...
vue+elementUI中使用Echarts （懒人无脑版）
vue+elementUI中使用Echarts (懒人无脑版)+(史上最强版) 前言一.Echarts 1.提供一个Echarts 网站随去随用 http://img.9cfcf.com/#tp- ...
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象
vue+element-ui中的el-table-column使用v-if导致位置错乱的现象自我记录. Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做除了使 Vue 变 ...
vue+elementui中使用echarts给柱形图添加背景色
vue+elementui中使用echarts给柱形图添加背景色首先使用npm安装echarts npm install echarts --save //or(或者使用) cnpm install ...

vue elementui中el-table 动态合并行数组去重

vue elementui中el-table 动态合并行数组去重相关推荐

最新文章

热门文章

vue elementui中el-table 动态合并行 数组去重

vue elementui中el-table 动态合并行 数组去重相关推荐

最新文章

热门文章

vue elementui中el-table 动态合并行数组去重

vue elementui中el-table 动态合并行数组去重相关推荐