电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue-列表下詳情的展開與折疊案例

瀏覽:2日期:2022-12-24 18:54:25

如下所示:

vue-列表下詳情的展開與折疊案例

功能描述

1、默認折疊,點擊時展示全部數據

2、點擊A項,A展開,之后有兩種情況:①再次點擊A,A折疊;②點擊其他項,如B,這時B展開,A折疊

解決方式

1、給展開折疊圖標添加一個樣式,顯示成動畫效果

<div :class='{’open’:showDetail === index}'></div>.arrow{ position absolute width: 0.6rem; height: 0.3rem; top 2.0rem right 0.8rem background url(../../../assets/images/icon_up.png) no-repeat background-size: 100% 100% transition: transform 0.3s -webkit-transition: transform 0.3s &.open{ transform : rotate(-180deg) }}

2、詳情樣式

<transition-group tag='div' mode=''> <div v-for='i in 1' :key='i' :ref='`stateopen${index}`' v-show='showDetail===index'>... </div></transition-group>

3、方法詳情

// 展開與折疊// 分析:// 1,showDetail默認為-1,第一次任意點擊B,當前B對象展開,showDetail=index=n,此時有兩種情況:// 情況1,再次點擊B,showDetail===index,B關閉,showDetail=-1// 情況2,點擊B以外的其他對象C,先關閉B,在打開當前對象CfoldAndUnfold(index,item){ if(this.showDetail===index){//兩次點擊的對象相同,關閉 this.showDetail = -1 }else{//點擊的對象不同,先關閉前一對象,再打開當前對象 this.showDetail = index }}

補充知識: Vue table 點擊按鈕展開折疊面板

vue 實現的 table 折疊展開功能,由于工作中用到,這里把相應代碼整理下,方便自己日后 Copy

1.Html 部分

由基本的 table 表單與折疊欄部分組成

PS:table 上需要加上 ref,以便方法中能夠獲取到 table 屬性

<!-- 注意:el-table 上加一個 ref='table' --> <el-table ref='table' :data='list' border style='width: 100%; margin-top:20px; min-height:700px'> <el-table-column label='編號'> <template slot-scope='scope'> <span>{{ id }}</span> </template> </el-table-column> <el-table-column label='姓名'> <template slot-scope='scope'> <span>{{ name }}</span> </template> </el-table-column> <el-table-column label='操作' prop='operation'> <template slot-scope='scope'> <el-button plain @click='toogleExpand(scope.row)'>詳情</el-button> </template> </el-table-column> <!-- 展開部分 --> <el-table-column type='expand' width='1'> <template slot-scope='props'> <el-form label-position='left' inline class='demo-table-expand'> <!-- 參數列表 --> <el-form-item label='1111' label-width='100%'> aaa </el-form-item> </el-form> </template> </el-table-column> </el-table>

2. vue 的 JS 部分

<script> export default { data() { return { list: [{ id: ’1’, name: ’王小1’, }, { id: ’2’, name: ’王小2’, }, { id: ’3’, name: ’王小3’, }, { id: ’4’, name: ’王小4’, }] } }, methods: { // 展開行效果 toogleExpand(row) { const $table = this.$refs.table // 注意,這里的 this.list 是上面 data 中的 list // 通過比對數據與行里的數據,對展開行進行控制,獲取對應值 this.list.map((item) => { if (row.id !== item.id) { $table.toggleRowExpansion(item, false) } }) $table.toggleRowExpansion(row) }, } } </script>

3.css 部分

這里除了基本的屬性外,主要我發現展開欄部分會有空白各自部分,還能拖開,因此加屬性把多余部分給隱藏掉

下方有注釋

<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: 100%; } .el-form-item__content { width: 100%; } /* 隱藏上方表格多余部分 */ .undefined.el-table__expand-column { display: none; } /* 隱藏上方表格多余部分 */ .el-table_1_column_8 .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { border-right: 0px solid #ebeef5 }</style>

4.效果圖

這個效果圖是我后面補的,但是功能是以上面來做的

vue-列表下詳情的展開與折疊案例

以上這篇vue-列表下詳情的展開與折疊案例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 税筹星_灵活用工平台_企业财务顾问_财税法薪综合服务平台 | 动物麻醉机-数显脑立体定位仪-北京易则佳科技有限公司 | 东莞工作服_东莞工作服定制_工衣订做_东莞厂服 | 货车视频监控,油管家,货车油管家-淄博世纪锐行电子科技 | 探鸣起名网-品牌起名-英文商标起名-公司命名-企业取名包满意 | 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 | SDG吸附剂,SDG酸气吸附剂,干式酸性气体吸收剂生产厂家,超过20年生产使用经验。 - 富莱尔环保设备公司(原名天津市武清县环保设备厂) | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 超声波流量计_流量标准装置生产厂家 _河南盛天精密测控 | pH污水传感器电极,溶解氧电极传感器-上海科蓝仪表科技有限公司 | 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 北京自然绿环境科技发展有限公司专业生产【洗车机_加油站洗车机-全自动洗车机】 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 深圳3D打印服务-3D打印加工-手板模型加工厂-悟空打印坊 | 挤奶设备过滤纸,牛奶过滤纸,挤奶机过滤袋-济南蓝贝尔工贸有限公司 | 展厅装修公司|企业展厅设计|展厅制作|展厅搭建—广州展厅装饰公司 | 塑料撕碎机_编织袋撕碎机_废纸撕碎机_生活垃圾撕碎机_废铁破碎机_河南鑫世昌机械制造有限公司 | 汽液过滤网厂家_安平县银锐丝网有限公司 | 钢格栅板_钢格板网_格栅板-做专业的热镀锌钢格栅板厂家-安平县迎瑞丝网制造有限公司 | 广东恩亿梯电源有限公司【官网】_UPS不间断电源|EPS应急电源|模块化机房|电动汽车充电桩_UPS电源厂家(恩亿梯UPS电源,UPS不间断电源,不间断电源UPS) | 陕西华春网络科技股份有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。 | 合肥风管加工厂-安徽螺旋/不锈钢风管-通风管道加工厂家-安徽风之范 | 防爆正压柜厂家_防爆配电箱_防爆控制箱_防爆空调_-盛通防爆 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 顶空进样器-吹扫捕集仪-热脱附仪-二次热解吸仪-北京华盛谱信仪器 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 杭州画室_十大画室_白墙画室_杭州美术培训_国美附中培训_附中考前培训_升学率高的画室_美术中考集训美术高考集训基地 | 磁力轮,磁力联轴器,磁齿轮,钕铁硼磁铁-北京磁运达厂家 | 陕西鹏展科技有限公司 | 山东石英砂过滤器,除氟过滤器「价格低」-淄博胜达水处理 | 千淘酒店差旅平台-中国第一家针对TMC行业的酒店资源供应平台 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 碳钢法兰厂家,非标法兰,定制异型,法兰生产厂家-河北九瑞管道 | 济南ISO9000认证咨询代理公司,ISO9001认证,CMA实验室认证,ISO/TS16949认证,服务体系认证,资产管理体系认证,SC食品生产许可证- 济南创远企业管理咨询有限公司 郑州电线电缆厂家-防火|低压|低烟无卤电缆-河南明星电缆 | 高速混合机_锂电混合机_VC高效混合机-无锡鑫海干燥粉体设备有限公司 |