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. uni-app和vue及微信小程序的异同

    uni-app和vue的区别1.目录不同 uni-app目录依赖原生小程序风格,比如分包的概念 vue中对不同的页面只需要在views文件夹中定义不同组件,然后配置路由跳转就行了,所有页面都是这样, ...

  2. 怎样在局域网中给网站作ssl认证,使其能以https协议访问(转)

    如果要在局域网达到效果需要满足以下几点要求: 1. 证书由可信任的CA机构颁发 2. 证书在有效期 3. 访问地址和证书的认证地址一致 说明: 1. 需要在局域网内构建CA机构 2. 证书的有效期建议 ...

  3. 非常简易的SpringBoot后台项目

    非常简易的SpringBoot后台项目 1. 创建项目 使用IDEA创建 Spring项目,或在 https://start.spring.io/ . https://start.aliyun.com ...

  4. 专业级语义搜索优化:利用 Cohere AI、BGE Re-Ranker 及 Jina Reranker 实现精准结果重排

    专业级语义搜索优化:利用 Cohere AI.BGE Re-Ranker 及 Jina Reranker 实现精准结果重排 1. 简介 1.1 RAG 在说重排工具之前,我们要先了解一下 RAG. 检 ...

  5. 9.5内网横向&代理&隧道

    Socks代理思路: 工具:nps.frp.ngrok.reGeorg.sockscap64.earthworm.proxifier.proxychains 知识点 1.内外网简单知识 2.内网1和内 ...

  6. kubernetes删除ns异常状态为:Terminating

    在部署kuboard控制平台的时候,不规范删除,导致ns状态为Terminating [root@master01 ~]# kubectl delete namespace kuboard ^C ro ...

  7. webpack高版本抽离css样式报错[已解决]

    全局安装的webpack版本是5.51.1,webpack-cli是4.9的版本; 本来想用 extract-text-webpack-plugin 的,但是报错了,查了一下文档 发现,已经不支持新版 ...

  8. Angular Material 18+ 高级教程 – CDK Accessibility の ListKeyManager

    介绍 ListKeyManager 的作用是让我们通过 keyboard 去操作 List Items. 一个典型的例子:Menu 有 4 个步骤: tab to menu enter 打开 menu ...

  9. Identity – HTTP Authentication

    前言 HTTP Authentication 是很古老的东西. 已经很少地方会用到了. 但还是给我遇上了. 在做 Google Ads Offline Conversion 时, 它提供了 2 种方式 ...

  10. C++ STL map/multimap容器

    map/multimap容器 Map的特性是,所有元素都会根据元素的键值自动排序.Map所有的元素都是pair,同时拥有实值和键值,pair的第一个元素被视为键值,第二个元素被视为实值,map不允许两 ...