Element-UI ( Dropdow )下拉菜单组件command传输对象
通过 :command绑定对象数据,handleCommand方法处理数据

template
<div v-for="(item, index) in FlyWarningList" :key="index">
<div :class="[isActive === item.isRead ? '':' warning-content', 'first-content']" v-if="item.infoType === '告警信息'">
<p class='content-item infoType'>{{item.infoType}}</p>
<p class='content-item'>注册编号:{{item.content.rescueNum}}</p>
<p class='content-item'>紧急阶段:{{item.content.phase}}</p>
<p class='content-item'>降落机场:{{item.content.landingStation}}</p>
<p class='content-item'>备降机场:{{item.content.alternateAirport}}</p>
<p class='content-item'>最后联系时间:{{item.content.lastContactTime}}</p>
<p class='content-item'>最后联系位置:{{item.content.lastContactLocation}}</p>
<div class='publish-time'>发布时间:{{item.sendTime}}</div>
<el-dropdown class='content-menu' trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="item">已读</el-dropdown-item>
<el-dropdown-item command="delete">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
methods
handleCommand (command) {
this.$message({
message: '消息已读',
type: 'success'
})
console.log('sendTime11111', command.sendTime)
console.log('command================2', JSON.stringify(command))
var data = {
type: command.type,
count: command.count,
active: command.active,
isRead: false,
messageNumber: command.messageNumber,
infoType: command.infoType,
infoUid: command.infoUid,
sendTime: command.sendTime,
content: command.content
}
this.$http.get('/seat/read', {
params: {
message: data
}
})
.then((res) => {
console.log('■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■')
console.log('res:', res)
console.log('■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■')
console.log(res.data)
if (res.data === '状态改变成功') {
command.isRead = false
console.log('active', command.isRead)
console.log('sendTime2222', command.sendTime)
}
}).catch((err) => {
console.log('请求失败■■■■■■■■■■■■■■' + err)
})
if (command === 'edit') {
this.$emit('toggleModal', this.activeName)
}
}
Element-UI ( Dropdow )下拉菜单组件command传输对象的更多相关文章
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- 详解Bootstrap下拉菜单组件
bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对应的源码文件为:dropdowns.less sass对应的源码文件为:_dropdowns.scs ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- Java Swing实战(二)下拉菜单组件JComboBox及其事件监听
接下来给"数据源配置"面板添加下拉框. /** * @author: lishuai * @date: 2018/11/26 13:51 */ public class Weimi ...
- 微信小程序 - 下拉菜单组件
使用: 1.导入组件 2.使用组件 3.数据传入 4. 获取数据(通过同步缓存,获取“choose”)- 发送到后端 点击下载:小程序-下拉组件.
- Bootstrap下拉菜单
前面的话 网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项,Bootstrap默认提供了用于显示链接列表的可切换.有上下文的菜单.而且在各种交互状态下的菜单展示需要和javascript插件配合 ...
- Bootstrap3系列:下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Mega Dropdown - 带子分类的响应式下拉菜单
当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...
随机推荐
- Jquery电子签名制作_jSignature
今天用Jquery的jSignature库制作一个电子签名 后台.net core上传到指定文件夹 下载jquery库 提取码:rd9g html @{ Layout = null; } <!D ...
- html+css 知识点总结 day1(01-08)
01 初步认识浏览器 02 浏览器内核 IE 内核:Trident, win10 Edge 内核:EdgeHTML Firefox(火狐浏览器) 内核:Ge ...
- Nhibernate的Session和StatelessSession性能比较
Nhibernate的Session和StatelessSession性能比较 作者:Jesai 一个月入30K的大神有一天跟我说:我当年在你现在这个阶段,还在吊儿郎当呢!所以你努力吧! 有时候,一个 ...
- scala 对一个数组分组操作
通常我们有一些需求,对一个数组两两进行翻转,通常就涉及到奇数偶数,否则就会出现数组index异常了,所以我们该怎么办呢? 虽然是一个入门级问题,但是我还是觉得这是一个很有意思的题目,因此写了一个对于通 ...
- 02.flask-script
网址:https://pypi.org/project/Flask-Script/ 文档:https://flask-script.readthedocs.io/en/latest/ 1.安装 2.新 ...
- Qt Installer Framework翻译(3-3)
移除组件 下图说明了删除所有或某些已安装组件的默认工作流程: 本节使用在macOS上运行的Qt 5维护工具为例,来演示用户如何删除所有或部分选定组件. 移除所有组件 用户启动维护工具时,将打开&quo ...
- NC使用教程
NetCat参数说明: 一般netcat做的最多的事情为以下三种: 扫描指定IP端口情况 端口转发数据(重点) 提交自定义数据包 1.扫描常用命令. 以下IP 处可以使用域名,nc会调用NDS解析成I ...
- mong 的 安装 和测试
<hr>
- 使用Async方法 Using Async Methods 精通ASP-NET-MVC-5-弗瑞曼 Listing 4-32.
- HDU-6214 Smallest Minimum Cut(最少边最小割)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6214 Problem Description Consider a network G=(V,E) w ...