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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
js读取注册表的键值示例
Sep 25 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
js中window.open()的所有参数详细解析
Jan 09 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP XML数据解析代码
2010/05/26 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
python del()函数用法
2013/03/24 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python中正则表达式的用法总结
2019/02/22 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
关于热爱祖国的演讲稿
2014/05/04 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
比较几种Redis集群方案
2021/06/21 Redis
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android