实现element-ui中 table 点击一行展开

先上效果图:

实现element-ui中 table 点击一行展开_第1张图片

 

实现思路:

1. table 添加  ref="refTable" 引用 该table

2. table 添加  @row-click="clickTable" 点击事件

3. 点击时,调用table的方法 toggleRowExpansion ,展开/关闭

参考API :  https://element.eleme.cn/#/zh-CN/component/table

clickTable(row,index,e){

    //调用,table的方法,展开/折叠 行
    this.$refs.refTable.toggleRowExpansion(row)
}

--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- 

参考代码,由于自己实际写的复杂.

而且数据,是 远端加载,不易懂 所以此处贴的是别人的代码:

(复制粘贴即可用,代码转自简书: https://www.jianshu.com/p/e51ba4cb11d6 )  





 

你可能感兴趣的:(实现element-ui中 table 点击一行展开)