Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)
2017-12-29 09:36
2631 查看
问题讲解:
在使用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。
大体思路参考了https://segmentfault.com/q/1010000008981772 SF论坛里面这位大佬的回答
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展开行的数组,最后是业务逻辑代码
methods:{ toggleRowExpansion(row){ this.expands = []; this.expands.push(row.id); } }
因为我们现在只要求展开一行,所以每次把需要展开行的id储存进数组时要先清空一次数组,然后在push进去,最终实现效果图
相关文章推荐
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- 使用FlexiGrid实现Extjs表格效果方法分享
- 使用DOM方法实现表格的隔行变色效果
- [置顶] element-ui 表格实现单元格可编辑的方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- 使用DOM方法实现表格的隔行变色效果
- 遇到jQuery中toggle()与checkbox的冲突,使用其他方法实现同样的效果(工作笔记)
- 使用FlexiGrid实现Extjs表格效果方法分享
- 两种方法使用jquery实现左右移动效果(包含each遍历方式)
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- 使用ListView控件实现漂亮的自定义表格效果实例
- android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果 推荐
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- 使用ListView控件实现漂亮的自定义表格效果实例
- 使用Jquery的ajax方式实现对表格的删除和修改
- dojo的connect方法使用与源代码剖析(在JavaScript里实现类似AOP的效果)
- 使用扩展方法对代码的行为进行封装的例子:封装UIElement的“拖动”
- Winform使用C#实现Treeview节点"正在展开..."效果