实现 element-ui 中 el-table 点击一行展开
微wx笑
2022-03-13【前端开发】
204
3
0关键字：
element-ui el-table
element-ui的el-table有展开行的功能，当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。但是默认的示例却只有点击固定的一个单元格才能展开，用户体验不好，如何才能只要点击一行的任意位置都可以展开呢？
实现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 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | <template> <el-table :data="tableData5" @row-click="clickTable" ref="refTable" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="商品名称"> <span>{{ props.row.name }}</span> </el-form-item> <el-form-item label="所属店铺"> <span>{{ props.row.shop }}</span> </el-form-item> <el-form-item label="商品 ID"> <span>{{ props.row.id }}</span> </el-form-item> <el-form-item label="店铺 ID"> <span>{{ props.row.shopId }}</span> </el-form-item> <el-form-item label="商品分类"> <span>{{ props.row.category }}</span> </el-form-item> <el-form-item label="店铺地址"> <span>{{ props.row.address }}</span> </el-form-item> <el-form-item label="商品描述"> <span>{{ props.row.desc }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="商品 ID" prop="id"> </el-table-column> <el-table-column label="商品名称" prop="name"> </el-table-column> <el-table-column label="描述" prop="desc"> </el-table-column> </el-table></template> <style> .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%; }</style> <script> export default { data() { return { tableData5: [{ id: '12987122', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }] } }, methods: { clickTable(row,index,e){ this.$refs.refTable.toggleRowExpansion(row) } }</script> |
————————————————
版权声明：本文为CSDN博主「胡萧徒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42144379/article/details/89511513
本文为转载文章，版权归原作者所有，不代表本站立场和观点。
