使用element-ui table expand展开行实现手风琴效果
问题讲解：
在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。
先展示一下ElementUI官方提供的示例代码效果图
可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion，这个方法应该是官方本意上想让我们来自由控制展开状态的，从传递的两个参数来看，一个是row（当前点击的行id），另一个是expended（行展开状态，boolean值），看上去有理有据，但是就是不知道怎么用，因为我始终无法获取到expended这个参数的值，有点气，所以这次我们用另一种方式来实现这个功能。
代码实现：
核心是 row-key、expand-row-keys属性
特别要注意的是row-key传入的是一个Function(row)，而expand-row-keys传入的是一个数组，元素的值是要展开的row的key。
row-key这个属性是获取当前行号的，expand-row-keys这个属性是获取到展开的行号的，所以前者为一个单值，而后者是一个数组形式，所以这个属性也同样适用于表格多选列这种情况。
<el-table
:data="compony"
style="width: 100%;margin-top:80px"
:row-key="getRowKeys"
:expand-row-keys="expands"
@current-change="toggleRowExpansion">
<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.com_name }}</span>
</el-form-item>
<el-form-item label="下属电厂ID">
<span>{{ props.row.fct_id }}</span>
</el-form-item>
<el-form-item label="电厂名称">
<span>{{ props.row.fct_name }}</span>
</el-form-item>
<el-form-item label="用户名">
<span>{{ props.row.user_name }}</span>
</el-form-item>
<el-form-item label="密码">
<span>{{ props.row.password }}</span>
</el-form-item>
<el-form-item label="加入时间">
<span>{{ props.row.join_time | formatDate}}</span>
</el-form-item>
<el-form-item label="离开时间">
<span>{{ props.row.leave_time }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label="公司 ID"
prop="com_id">
</el-table-column>
<el-table-column
label="公司名称"
prop="com_name">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
这边因为要涉及到我项目最终实现的效果，所以我这里就直接把我的整个table都复制上来了，这边的重点主要是table的各个属性，也就是这个代码段的开头，我们在这里涉及到了一个新的监听事件@current-change="toggleRowExpansion"，这个事件表示切换行的时候会有一个触发的事件发生，我们在获取了行id，展开行id之后，还要去data里面定义我们所要用到的数据框架。
data() {
return {
compony:[],
// 获取row的key值
getRowKeys(row) {
return row.id;
},
form: {},
// 要展开的行，数值的元素是row的key值
expands: [],
}
},
这边我就展示所需要用到的数据布置了，通过getRowKeys方法获取到row的行id值，定义一个expands展开行的数组，最后是业务逻辑代码
data() {
return {
compony:[],
// 获取row的key值
getRowKeys(row) {
return row.id;
},
form: {},
// 要展开的行，数值的元素是row的key值
expands: [],
}
},
因为我们现在只要求展开一行，所以每次把需要展开行的id储存进数组时要先清空一次数组，然后在push进去，最终实现效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3新特性中最重要、内容最多的组合式api,组合式api既可以解决之前vue2开发的痛点,又提升了性能,下面这篇文章主要给大家介绍了关于vue3 option api新玩法的相关资料,需要的朋友可以参考下2022-06-06
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
这篇文章主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05![关于console.log打印结果是 [object Object]的解决](//img.jbzj.com/images/xgimg/bcimg2.png)
关于console.log打印结果是 [object Object]的解决
这篇文章主要介绍了关于console.log打印结果是 [object Object]的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上。本文将在Vue中整合Echarts实现可视化界面，感兴趣的可以了解一下2022-04-04
这篇文章主要给大家介绍了关于如何利用Vue实现一个markdown编辑器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
在Vue应用中,表单验证是非常重要的一部分,Vue提供了一些内置的验证规则,比如required、min、max等,但是有时候我们需要对表单进行自定义验证,以满足特定的业务需求,本文将介绍如何在Vue中进行表单自定义验证,感兴趣的朋友可以参考下2023-12-12
这篇文章主要介绍了vue-cli3项目展示本地Markdown文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了vue中使用jeecg进行前后端联调方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
map()函数定义在JS的array中,它返回一个新的数组,下面这篇文章主要给大家介绍了关于Vue中map()的用法案例,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue 中常见的时间格式转换,需要的朋友可以参考下2022-05-05
![关于console.log打印结果是 [object Object]的解决](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论