VUE+ElementUI Table表格实现“指定行“展开并且其他行收起，“指定行”数据重复实现“合并行”

文章目录

遇到甲方爸爸一个需求，在原本的table表格中需要每一行具有下拉列表的功能，实现“指定行”展开，下拉菜单中并且含有数据属性重复的，则还需合并行。

页面效果

展开效果

loading

核心代码

<el-table:data="testSampleList"@expand-change="expandChange"row-key="id":expand-row-keys="expandRowKeys"><el-table-columntype="expand"width="15px"><templateslot-scope="scope"><el-table:data="scope.row.dropSampleList"v-loading="scope.row.droploading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading":span-method="(params) => objectSpanMethod(params, scope.$index)":key="scope.$index"></el-table></template></el-table-column></el-table>

<script>data(){return{//下拉表格展开行id的数组expandRowKeys:[],}},methods:{// 展开事件----动态获取内嵌表数据expandChange:function(row, expandedRows){// 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！// 展开的时候expandedRows有值，收起的时候为空.if(expandedRows.length){this.expandRowKeys=[]this.expandRowKeys.push(row.id)this.tankInfoTable=[]for(let m=0;m<this.testSampleList.length;m++){if(this.testSampleList[m].id==row.id){this.tankInfoTable.push(this.testSampleList[m])}}this.getTestSampleTable(row);}},//下拉菜单接口getTestSampleTable(row){let query = row.id;
            row.droploading =true;getTestSample(query).then(res=>{this.testSampleList.forEach((temp, index)=>{// 找到当前点击的行，把动态获取到的数据赋值进去if(temp.id == row.id){this.testSampleList[index].dropSampleList = res.rows;this.testSampleList[index].spanArr =[];this.getSpanArr(this.testSampleList, index)}})   
                  row.droploading =false;});},//下拉菜单合并行getSpanArr(testSampleList, index, dropSampleList){let data = testSampleList[index].dropSampleList;this.spanArr =[]this.pos =0// data就是我们从后台拿到的数据for(var i =0; i < data.length; i++){if(i ===0){this.spanArr.push(1);this.pos =0;}else{// 判断当前元素与上一个元素是否相同// console.log(data[i],"data")if(data[i].testitemsNumber === data[i -1].testitemsNumber){this.spanArr[this.pos]+=1;this.spanArr.push(0);}else{// 不相等push 1this.spanArr.push(1);this.pos = i;}}}this.$set(this.testSampleList[index],"spanArr",this.spanArr);},objectSpanMethod({ row, column, rowIndex, columnIndex }, index){if(columnIndex ===3){const _row =this.testSampleList[index].spanArr[rowIndex];const _col = _row >0?1:0;return{// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col
            };}},}</script>

属性解析

代码解析

展开行有两种方式：
方法一是利用table组件中 default-expand-all 属性，将 “内容是否存在” 作为判断条件，实现默认展开。当设为true时会默认展开所有展开行，可当下拉el-table-column type=“expand”></el-table-column标签里无内容时，会显示空白行。所以不推荐
方法二则是利用table组件中row-key属性和expand-row-keys属性配相互配合达到“指定行”展开的目的。
在expand-change事件中利用expandedRows属性进行判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
为了接受后端传来的下拉菜单接口，for循环封装成getTestSampleTable函数，并有利于将合并数据重复行。
getSpanArr函数中则是进行元素判断，是否合并；objectSpanMethod函数中则是如何合并，以及合并行数。