Element UI toggleRowExpansion用法

时间:2023-03-10 02:10:40
Element UI toggleRowExpansion用法

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

一、官方文档

  方法名: toggleRowExpansion

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

  参数: row, expanded

二、用法示例(vue.js)

 <template>
<el-table ref="topicTable" :row-key="getRowKeys" :data="tDt">
<el-table-column type="expand">expand area</el-table-column>
<el-table-column label="column1">
<template slot-scope="scope">
<el-button @click="handleConnectionSearch(scope.row)">
</el-button>
</template>
</el-table-column>
</el-table>
</template> <script>
export default {
data() {
return {
tDt:[{id:1}, {id:2}]
}
},
methods: {
handleConnectionSearch(row) {
this.$refs.topicTable.toggleRowExpansion(row, true) // 点击button展开
},
getRowKeys(row) {
return row.id
}
}
}
</script>