写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果。
效果前瞻:
官网table expand地址:http://element-cn.eleme.io/#/zh-CN/component/table#zhan-kai-xing
先删减一下代码:
1 <template> 2 <el-table ref=\"table\" border stripe highlight-current-row :data=\"tableData5\" style=\"width: 800px;\"> 3 <el-table-column label=\"商品 ID\" prop=\"id\" width=\"100\"> 4 </el-table-column> 5 <el-table-column label=\"商品名称\" prop=\"name\"> 6 </el-table-column> 7 <el-table-column label=\"描述\" prop=\"desc\"> 8 </el-table-column> 9 <el-table-column label=\"操作\" width=\"100\"> 10 <template slot-scope=\"scope\"> 11 <el-button type=\"text\" @click=\"toogleExpand(scope.row)\">查看详情</el-button> 12 </template> 13 </el-table-column> 14 <el-table-column type=\"expand\" width=\"1\"> 15 <template slot-scope=\"props\"> 16 <el-form label-position=\"left\" inline class=\"demo-table-expand\"> 17 <el-form-item label=\"商品名称\"> 18 <span>{{ props.row.name }}</span> 19 </el-form-item> 20 </el-form> 21 </template> 22 </el-table-column> 23 </el-table> 24 </template> 25 26 <script> 27 export default { 28 data() { 29 return { 30 tableData5: [{ 31 id: \'1\', 32 name: \'好滋好味鸡蛋仔1\', 33 desc: \'荷兰优质淡奶,奶香浓而不腻1\', 34 }, { 35 id: \'2\', 36 name: \'好滋好味鸡蛋仔2\', 37 desc: \'荷兰优质淡奶,奶香浓而不腻2\', 38 }, { 39 id: \'3\', 40 name: \'好滋好味鸡蛋仔3\', 41 desc: \'荷兰优质淡奶,奶香浓而不腻3\', 42 }, { 43 id: \'4\', 44 name: \'好滋好味鸡蛋仔4\', 45 desc: \'荷兰优质淡奶,奶香浓而不腻4\', 46 }] 47 }; 48 }, 49 methods: { 50 toogleExpand(row) { 51 let $table = this.$refs.table; 52 $table.toggleRowExpansion(row) 53 } 54 } 55 } 56 </script>
后台中,我们一般会点击按钮去展开查看详情,所以我们替换箭头为“查看详情”按钮,通过toggleRowExpansion方法展开合闭expand。效果如图:
但是现在我们还没有实现手风琴效果,修改methods→toogleExpand方法:
1 toogleExpand(row) { 2 let $table = this.$refs.table; 3 this.tableData5.map((item) => { 4 $table.toggleRowExpansion(item, false) 5 }) 6 $table.toggleRowExpansion(row) 7 }
table的toggleRowExpansion方法可以传两个参数,第一个参数传row,第二个参数传false,意思是合闭expand。我们把每行的expand关闭一次,再把对应的行打开,这样就实现了手风琴效果了。
新的问题,当我们点击打开了手风琴,每次都至少有一个是打开状态的,这样很明显是bug了,我们做一下让已打开行的expand合闭。
bug原因:当我们点击已打开的expand想关闭它时,相当于走了一遍$table.toggleRowExpansion(row, false)后,又走了一遍$table.toggleRowExpansion(row),所以这行的expand又被打开了。我们把“合闭/打开“的expand对应的行去除“合闭“操作。
修复toogleExpand方法:
1 toogleExpand(row) { 2 let $table = this.$refs.table; 3 this.tableData5.map((item) => { 4 if (row.id != item.id) { 5 $table.toggleRowExpansion(item, false) 6 } 7 }) 8 $table.toggleRowExpansion(row) 9 }
需求结束。
后记:有时候,后台需求会很纷繁复杂,我们在使用别人造的轮子时要多研究多思考。