使用元素-用户界面表扩展来扩展线条以实现手风琴效果
解释问题:
在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: [],} },因为我们现在只要求展开一行,所以每次把需要展开行的编号储存进数组时要先清空一次数组,然后在推进去,最终实现效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:使用元素-用户界面表扩展来扩展线条以实现手风琴效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。