vue-列表下详情的展开与折叠案例


Posted in Javascript onJuly 28, 2020

如下所示:

vue-列表下详情的展开与折叠案例

功能描述

1、默认折叠,点击时展示全部数据

2、点击A项,A展开,之后有两种情况:①再次点击A,A折叠;②点击其他项,如B,这时B展开,A折叠

解决方式

1、给展开折叠图标添加一个样式,显示成动画效果

<div class="arrow" :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 class="expert-detail" tag="div" mode="">
 <div v-for="i in 1" :key="i" class="detail" :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,在打开当前对象C
foldAndUnfold(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 align="center" label="编号">
  <template slot-scope="scope">
   <span>{{ id }}</span>
  </template>
  </el-table-column>
 
  <el-table-column align="center" label="姓名">
  <template slot-scope="scope">
   <span>{{ name }}</span>
  </template>
  </el-table-column>
 
  <el-table-column label="操作" width="300" align="center" 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-列表下详情的展开与折叠案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
js图片自动切换效果处理代码
May 07 Javascript
js展开闭合效果演示代码
Jul 24 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 #Javascript
JS代码简洁方式之函数方法详解
Jul 28 #Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 #Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 #Javascript
js实现全选和全不选
Jul 28 #Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 #Javascript
You might like
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python之re操作方法(详解)
2017/06/14 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
用python进行视频剪辑
2020/11/02 Python
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
门卫岗位职责
2013/11/15 职场文书
表演方阵解说词
2014/02/08 职场文书
实习单位鉴定评语
2014/04/26 职场文书
小学生通知书评语
2014/12/31 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库