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 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
node.js入门教程
Jun 01 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
JS中的JSON对象的定义和取值实现代码
May 09 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
js+css实现扇形导航效果
Aug 18 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
深入解析Python中的集合类型操作符
2015/08/19 Python
浅谈python中set使用
2016/06/30 Python
理论讲解python多进程并发编程
2018/02/09 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
使用python实现多维数据降维操作
2020/02/24 Python
keras得到每层的系数方式
2020/06/15 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
大学生自荐信怎么写
2015/03/26 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL