实现element-ui中|实现element-ui中 table 点击一行展开
先上效果图:
【实现element-ui中|实现element-ui中 table 点击一行展开】
文章图片
实现思路:--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
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 )
{{ props.row.name }}
{{ props.row.shop }}
{{ props.row.id }}
{{ props.row.shopId }}
{{ props.row.category }}
{{ props.row.address }}
{{ props.row.desc }}
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理