效果：
1、不点击小箭头，点击其他列中的某个按钮展开行内容。-通过toggleRowExpansion方法展开合闭expand
2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了）-设置 width="1"
效果.png
<template>
<el-table ref="tables" border stripe :data="list">
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<div @click="toogleExpand(scope.row)">
<i
class="el-icon-arrow-down"
:class="scope.row.icon == 'down' ? '' : 'mirrorRotateLevel'"
></i>
<el-button size="mini" type="text">详情</el-button>
</div>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template slot-scope="scope">
<el-table :data="scope.row.expandData" ref="table">
<el-table-column prop="amount" label="数量" />
<el-table-column prop="itemPrice" label="单价" />
<el-table-column prop="costs" label="金额" />
</el-table>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
list: []
};
},
methods: {
// 点击操作详情 出现折叠内容
tableDatial(row, index) {
this.list[index].icon = this.list[index].icon == "down" ? "up" : "down";
this.$refs.tables.toggleRowExpansion(row);
}
}
};
</script>
<style lang="scss" scoped>
.mirrorRotateLevel {
transform: rotateX(180deg);
}
</style>
