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实现控制内容的向上向下滚动效果
Jun 26 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
python类和函数中使用静态变量的方法
2015/05/09 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
打架检讨书100字
2014/01/19 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
入党积极分子群众意见
2015/06/01 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
五年级数学教学反思
2016/02/16 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
yolov5返回坐标的方法实例
2022/03/17 Python