element-ui表格展开行每次只能展开一行
<template>
<el-table
:data="tableData" :expand-row-keys="expands"
:row-key='getRowKeys'
@expand-change="expandChangeHandler" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="所属店铺">
<span>{{ props.row.shop }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="商品 ID"
prop="id">
</el-table-column>
<el-table-column
label="商品名称"
prop="name">
</el-table-column>
<el-table-column
label="描述"
prop="desc">
</el-table-column>
</el-table>
</template> <script>
export default {
data() {
return {
tableData: [{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶,奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}],
getRowKeys(row) {
return row.id;
},
//存放展开的id
expands: [],
}
},
methods:{
// 点击展开的时候就会触发这个方法
expandChangeHandler(row, expandedRows) {
console.log('expandedRows',expandedRows)
console.log('row',row)
if (expandedRows.length) {
this.expands = [];
if (row) {
this.expands.push(row.id);
}
} else {
this.expands = [];
}
}
}
}
</script>
<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: 50%;
}
</style>

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

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

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

  2. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

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

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

  4. element UI表格行高、padding等设置报错问题

    element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl   (表 ...

  5. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  6. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  7. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  8. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  9. Element UI Form 每行显示多列,即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  10. element ui表格表头顺序错乱的问题

    因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...

随机推荐

  1. 华为云GaussDB两大数据库通过中国信通院多项评测

    摘要:权威认可!华为云GaussDB两大数据库通过中国信通院多项评测. 本文分享自华为云社区<官宣!华为云GaussDB两大数据库通过中国信通院多项评测>,作者: GaussDB 数据库 ...

  2. Vue组件间的传值五大场景,你造吗?

    摘要:组件是 vue.js最强大的功能之一,这五个组件间传值场景你了解吗? 本文分享自华为云社区<你了解Vue组件间传值五大场景吗?>,作者:北极光之夜. . 父组件向子组件传值: 比如有 ...

  3. 一个Camel Multicast组件聚合策略问题的解决过程

    摘要:本文通过案例,发现了一个Camel Multicast组件聚合策略相关的问题.通过查看Camel源代码,找到了问题原因并给出了解决方案.希望本文可以帮助到遇到同样问题的Camel用户. 本文分享 ...

  4. 人工智能聊天DEMO

    import urllib.parse import requests #调用机器人接口 def qingyunke(msg): url = "http://api.qingyunke.co ...

  5. Grafana--添加用户

    版本:6.5.2 添加用户: 设置账号密码: 设置账号权限(新增的用户都是仅查看的权限):

  6. three.js 火焰效果

    代码是网上找的代码,通过调参.修改.封装实现的. 代码: /** * 火焰 */ import * as THREE from '../build/three.module.js'; let MyFi ...

  7. 2024-01-17:lc的30. 串联所有单词的子串

    2024-01-17:用go语言,给定一个字符串 s 和一个字符串数组 words. words 中所有字符串 长度相同. s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接 ...

  8. HDU - 1560:DNA sequence ( 迭代加深搜索基础题 )

    Problem Description The twenty-first century is a biology-technology developing century. We know tha ...

  9. vue学习笔记 一、环境搭建

    系列导航 vue学习笔记 一.环境搭建 vue学习笔记 二.环境搭建+项目创建 vue学习笔记 三.文件和目录结构 vue学习笔记 四.定义组件(组件基本结构) vue学习笔记 五.创建子组件实例 v ...

  10. Java面试——VUE2&VUE3概览

    一.VUE2.0 1.对于MVVM的理解 MVVM 是 Model-View-ViewModel 的缩写. Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表U ...