默认展开点
目标展开点
解决代码:
html部分:
<el-table :row-class-name="tableRowClassName" size="small"
:header-cell-style="{background:'#0069cf',color:'#ffffff','text-align':'center'}" :data="tableData"
:expand-row-keys="expands" :row-key="getRowKeys" border style="width: 100%">
<el-table-column type="expand" align="center">
<template slot-scope="scope">
<el-tag v-for="(item,index) in scope.row.tblNmList" :key="item" effect="plain">
{{ item }} { {{scope.row.tblIdList[index]}} }
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" prop="index" label="序号" width="80">
<template slot-scope="scope">
<span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column align="left" prop="tblNmList" label="xxxxx" width="600">
<template slot-scope="scope">
<el-tag v-for="(item,index) in scope.row.tblNmList.slice(0, 5)" :key="item" effect="plain">
{{ item }} { {{scope.row.tblIdList[index]}} }
</el-tag>
<!-- <el-tag @click="clickExpandMore(scope.row.id)" >
更多...
</el-tag> -->
<el-button type="text" @click="clickExpandMore(scope.row.id)">更多...</el-button>
</template>
</el-table-column>
</el-table>
js-data部分:
expands: [],
getRowKeys(row) {
return row.id;
}
js-method部分:
handleExpandChange(row, expandedRows) {
var index=that.expands.indexOf(row);
if(index!=-1){
that.expands.splice(index,1);
}else{
that.expands = [];
that.expands.push(row);
}
},
clickExpandMore(row){
that.handleExpandChange(row);
},
关键点属性::expand-row-keys="expands" , :row-key="getRowKeys"
实现:默认显示字段内前5个信息,点击更多按钮,展开全部字段信息
效果图: