使用element-ui table expand展开行实现手风琴效果

释放双眼,带上耳机,听听看~!

写这篇博客的初衷:官网演示效果为点击toggle,已经展开的项不会因为其他项展开而关闭,所以延伸了下,扩展为手风琴效果。

效果前瞻:

使用element-ui table expand展开行实现手风琴效果

 

官网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。效果如图:

使用element-ui table 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 }

需求结束。

后记:有时候,后台需求会很纷繁复杂,我们在使用别人造的轮子时要多研究多思考。

 

给TA打赏
共{{data.count}}人
人已打赏
随笔日记

CSS-非常有用的css变量

2020-11-9 3:47:48

随笔日记

你这辈子最引以为傲的是什么?

2020-11-9 3:47:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索