遇到甲方爸爸一个需求，在原本的table表格中需要每一行具有下拉列表的功能，实现“指定行”展开，下拉菜单中并且含有数据属性重复的，则还需合并行。
页面效果
展开效果
loading
核心代码
<el-table
:data="testSampleList"
@expand-change="expandChange"
row-key="id"
:expand-row-keys="expandRowKeys"
>
<el-table-column type="expand" width="15px" >
<template slot-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 1
this.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>
属性解析
文章来源：https://www.toymoban.com/news/detail-818382.html
代码解析
展开行有两种方式：
方法一是利用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函数中则是如何合并，以及合并行数。文章来源地址https://www.toymoban.com/news/detail-818382.html
到了这里，关于VUE+ElementUI Table表格实现“指定行“展开并且其他行收起，“指定行”数据重复实现“合并行”的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
