使用element-ui中table expand展开行控制显示隐藏
问题讲解：
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。先展示一下ElementUI官方提供的示例代码效果图
可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion，这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到expended这个参数的值，有点气，所以这次我们用另一种方式来实现这个功能。
<template>
<el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
<el-table-column label="商品 ID" prop="id" width="100">
</el-table-column>
<el-table-column label="商品名称" prop="name">
</el-table-column>
<el-table-column label="描述" prop="desc">
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ props.row.name }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData5: [{
id: '1',
name: '好滋好味鸡蛋仔1',
desc: '荷兰优质淡奶，奶香浓而不腻1',
}, {
id: '2',
name: '好滋好味鸡蛋仔2',
desc: '荷兰优质淡奶，奶香浓而不腻2',
}, {
id: '3',
name: '好滋好味鸡蛋仔3',
desc: '荷兰优质淡奶，奶香浓而不腻3',
}, {
id: '4',
name: '好滋好味鸡蛋仔4',
desc: '荷兰优质淡奶，奶香浓而不腻4',
}]
};
},
methods: {
toogleExpand(row) {
let $table = this.$refs.table;
$table.toggleRowExpansion(row)
}
}
}
</script>我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：
因为我设置了<el-table-column type="expand" width="1"></el-table-column> 会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；
再设置此table的样式margin-left:1px；好了，完美实现。
放上项目最终的效果图，无多出的1px边框。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
