使用元素-用户界面表扩展来扩展线条以实现手风琴效果

解释问题：

在vue版本的ElementUI中使用table函数时，仍然存在一些问题。可以说，团队饿了的时候在这个UI框架中做了很好的文档编写，但是还是有一些方法乍一看比较混乱，表的常用功能的一些样例代码也不是很详细，所以这次写个博客来讨论一下这个可扩展表的手风琴效果。

首先，正式展示ElementUI提供的示例代码渲染

可以看到，在官方代码中，并没有自动折叠这个可展开表的功能。我点击其他选项卡后，最后点击的一行仍然处于展开状态，控制模式只能通过点击左上角的小箭头来控制该行的展开状态。体验不是特别好，可以说有点差。然而，我后来在以下文档中发现，在方法中有一个名为togglerowExpansion的方法。这种方法应该是官方的意图，我们应该自由控制扩张状态。从传递的两个参数来看，一个是Row(当前单击的行id)，另一个是expended(行扩展状态，布尔值)，这看起来是合理的。但是我就是不知道怎么用，因为我不能得到一直消耗的参数的值，所以这次我们用另一种方法来实现这个函数。

代码实现：

核心是行键和扩展行键属性

请特别注意，行键在函数(行)中传递，而扩展行键在数组中传递，元素的值是要扩展的行的键。

Row-key获取当前行号，expand-row-key获取扩展行号，所以前者是单个值，而后者是数组形式，所以这个属性也适用于表中多列的情况。

El-table : data=' compony ' style=' width : 100%；margin-top :80 px ' : row-key=' GetRowKeys ' : expand-row-key=' expands ' @ current-change=' toggleRowexpansion ' El-table-column type=' expands ' template slot-scope=' props ' El-form标签-位置=' left ' inline class=' demo-table-expands ' El-form-item标签='公司名称span { {道具。划船。com _ name } }/span/El-表单-项目El-表单-项目标签='下属电厂ID"span { {道具。划船。FCT _ ID } }/span/El-form-item El-form-item标签="电厂名称span { {道具。划船。FCT _ name } }/span/El-form-item El-form-item标签='用户名span { {道具。划船。用户名} }/span/El-form-item El-form-item标签='密码span { {道具。划船。密码表格项目表格项目标签='加入时间span { {道具。划船。join _ time | format date } }/span/El-form-item El-form-item标签='离开时间span { {道具。划船。leave _ time } }/span/El-form-item/El-form/template/El-table-column El-table-column标签='公司标识'道具=' com _ ID '/El-表-列El-表-列标签='公司名称prop=' com _ name '/El-table-column El-table-column标签='操作模板槽-作用域=' scope ' El-button size=' mini ' @ click=' handleEdit(作用域$index，scope.row)编辑/El-button El-button size=' mini ' type=' danger ' @ click=' handleDelete(作用域$index，scope.row)删除/El-按钮/模板/El-表格-列/El-表格这边因为要涉及到我项目最终实现的效果，所以我这里就直接把我的整个桌子都复制上来了，这边的重点主要是桌子的各个属性，也就是这个代码段的开头，我们在这里涉及到了一个新的监听事件@ current-change=' toggleRowExpansion '，这个事件表示切换行的时候会有一个触发的事件发生，我们在获取了行id，展开行编号之后，还要去数据里面定义我们所要用到的数据框架。

data() { return { compony:[]，//获取排的键值getRowKeys(行){返回行。id；}，form: {}，//要展开的行，数值的元素是排的键值expands: []，} }，这边我就展示所需要用到的数据布置了，通过getRowKeys方法获取到排的行编号值，定义一个扩大展开行的数组，最后是业务逻辑代码

data() { return { compony:[]，//获取排的键值getRowKeys(行){返回行。id；}，form: {}，//要展开的行，数值的元素是排的键值expands: []，} }，因为我们现在只要求展开一行，所以每次把需要展开行的编号储存进数组时要先清空一次数组，然后在推进去，最终实现效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。