1、table 部分

:row-key='getRowKeys':expand-row-keys="expands"@expand-change="expandSelect"

2、column 部分 :参见官方示例

<el-table-column type="expand" >
<template slot-scope="props">
XXXX
</template>
</el-table-column>

3、data部分

 data:{
expands: [],
},

4、methods部分

getRowKeys: function (row) {
return row.id
},
expandSelect: function (row, expandedRows) {
var that = this
if (expandedRows.length) {
that.expands = []
if (row) {
that.expands.push(row.id)
}
} else {
that.expands = []
}
}

参考:

https://www.cnblogs.com/qianjin888/p/10246108.html

https://blog.csdn.net/katy_1/article/details/85113191

element-ui table 实现表格展开行每次只能展开一行的更多相关文章

  1. element-ui table表格展开行每次只能展开一行

    https://www.jianshu.com/p/a59c22202f2c <template> <el-table @expand-change="expandSele ...

  2. element ui table(表格)点击一行展开

    element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击 ...

  3. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  4. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  5. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  6. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  7. Vue. 之 Element获取table中选中的行

    Vue. 之 Element获取table中选中的行 问题描述: 如下截图,在Table中选择数据后,然后在点击“统计”按钮,获取Table表中选择的行 解决方案: 1. 给“统计”这个按钮添加一个点 ...

  8. Element UI table参数中的selectable的使用

    Element UI table参数中的selectable的使用中遇到的坑:页面: <el-table-column :selectable='selectable' type="s ...

  9. c# winform DataGridView单击选中一整行,只能单选,不能选择多行,只能选择一行

    设置DataGridView的属性SelectionMode为FullRowSelect 这样就使DataGridView不是选择一个字段,而是选择一整行了 设置DataGridView的属性Mult ...

  10. element ui table 导出excel表格

    https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...

随机推荐

  1. 一文了解svg之stroke属性

    属性 stroke-width SVG具有stroke-width定义笔触宽度的CSS属性. <svg width="500" height="120"& ...

  2. 小tips:CSS实现0.5px的边框的两种方式

    方式一 <style> .border { width: 200px; height: 200px; position: relative; } .border::before { con ...

  3. Angular Material 18+ 高级教程 – Datepicker の Calendar & Custom DateAdapter (Temporal)

    前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件. 还有如何自定义 DateAdapter,让 Calendar 支持 TC39 ...

  4. 【渗透测试】ATT&CK靶场一,phpmyadmin,域渗透,内网横向移动攻略

    前言 VulnStack,作为红日安全团队匠心打造的知识平台,其独特优势在于全面模拟了国内企业的实际业务场景,涵盖了CMS.漏洞管理及域管理等核心要素.这一设计理念源于红日安全团队对ATT&C ...

  5. python3 numpy的一些小知识点

    简介 一个用python实现的科学计算,包括: 1.一个强大的N维数组对象Array: 2.比较成熟的(广播)函数库: 3.用于整合C/C++和Fortran代码的工具包: 4.实用的线性代数.傅里叶 ...

  6. Windows右下角时间显示具体星期

    事件起因: 有时候脑子不清楚,过着过着就会忘记今天是星期几,错过一些重要事情,于是乎就想看看Windows右下角能不能显示到具体星期,果然在查了资料之后这个需求可以达成 解决办法: 控制面板 - 日期 ...

  7. 【赵渝强老师】在MongoDB中使用MapReduce方式计算聚合

    MapReduce 能够计算非常复杂的聚合逻辑,非常灵活,但是,MapReduce非常慢,不应该用于实时的数据分析中.MapReduce能够在多台Server上并行执行,每台Server只负责完成一部 ...

  8. LeetCode 564. Find the Closest Palindrome (构造)

    题意: 给一个数字n 求离n最近(且不等)的回文串 存在多个答案返回最小的 首先很容易想到 将数字分为两段,如 12345 -> 123/45,然后将后半段根据前面的进行镜像重置 123/45 ...

  9. 2021年第十一届数据技术嘉年华(DTC)资料分享

    数据技术嘉年华(DTC)是由由中国DBA联盟(ACDU)和墨天轮社区联合主办的数据技术领域的盛会,至今已成功举办11届,吸引和聚集了众多数据领域学术精英.领袖人物.技术专家.从业者和技术爱好者,于此进 ...

  10. 前端 面试 html css 如何让一个盒子水平垂直居中?

    方法1  使用子绝父相 定位  推荐 说明: 让父元素相对定位,因为要让子元素以父元素为参考对象,如果父元素不设置定位,子元素的参考对象就是整个页面document: 子元素绝对定位,top:50%: ...