这边因为业务的需求,觉得随着产品中心以后需要按钮的增多(图1操作栏的效果),这样会导致排版和按钮过于冗长的问题,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(图1操作1栏的效果) 。
图1 两种按钮效果
但是elementui官方文档中的handlecommand方法只允许接入一个参数,这个参数用于触发你选择的是哪一个选项。而我们实际中还需要传入一个当前行数(如果和我一样,也是用table显示数据的话)的对象进去,后面要使用这个对象的某些字段传给后台进行一些增删改查的操作。
图2 elementui官方文档中el-dropdown的样例
于是,我们必须在执行handlecommand方法之前,对这个command参数进行重新封装成一个对象,使其内部包含我们想要的数据方便后面调用。
放出代码:
<el-table-column label="操作1"> <template slot-scope="scope"> <el-dropdown split-button type="primary" @command="handlecommand"> 其他操作 <el-dropdown-menu slot="dropdown" > <el-dropdown-item :command="beforehandlecommand(scope.$index, scope.row,'a')">编辑</el-dropdown-item> <el-dropdown-item :command="beforehandlecommand(scope.$index, scope.row,'b')">删除</el-dropdown-item> <el-dropdown-item :command="beforehandlecommand(scope.$index, scope.row,'c')">分配角色</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> </el-table-column>
因为我们是写在表格里的,所以需要一个插槽,具体的根据实际情况进行修改。给<el-dropdown-item>标签的command属性绑定一个方法,这个方法就可以传入我们想要的参数,然后利用这个方法封装成一个对象,再将这个对象传入handlecommand方法。
<script> export default { methods: { handleedit(index, row) { //todo }, deleteuser(index, row) { //todo }, assignrole(index, row){ //todo }, beforehandlecommand(index, row,command){ return { 'index': index, 'row': row, 'command':command } }, handlecommand(command) { switch (command.command) { case "a"://编辑 this.handleedit(command.index,command.row); break; case "b"://删除 this.deleteuser(command.index,command.row); break; case "c"://分配角色 this.assignrole(command.index,command.row); break; } } }, } </script>
至于匹配command选了哪个,用switch语句效率就会比较高了。
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论