Element UI toggleRowExpansion用法


背景: 官方说明文档没有具体代码示例

一、官方文档

  方法名: toggleRowExpansion

  说明: 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开)

  参数: row, expanded

二、用法示例(vue.js)

 1 <template>
 2   <el-table ref="topicTable" :row-key="getRowKeys" :data="tDt">
 3     <el-table-column type="expand">expand area</el-table-column>
 4     <el-table-column label="column1">
 5       <template slot-scope="scope">
 6         <el-button @click="handleConnectionSearch(scope.row)">        
 7         </el-button>
 8       </template>
 9     </el-table-column>
10   </el-table>
11 </template>
12 
13 <script>
14 export default {
15   data() {
16     return {
17       tDt:[{id:1}, {id:2}]
18     }
19   },
20   methods: {
21     handleConnectionSearch(row) {
22       this.$refs.topicTable.toggleRowExpansion(row, true) // 点击button展开
23     },
24     getRowKeys(row) {
25       return row.id
26     }
27   }
28 }
29 </script>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM