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 是带 ...
随机推荐
- python中常⽤的excel模块库
python中常用的excel模块库&安装方法 openpyxl openpyxl是⼀个Python库,用于读取/写⼊Excel 2010 xlsx / xlsm / xltx / xltm⽂ ...
- Jenkins Job构建
Jenkins job介绍 Jenkins Freestyle与Pipeline Job区别 Jenkins Job构建配置 一 .环境准备 1.配置Jenkins server本地Git ...
- AI——第四次工业革命
历史上发生了三次工业革命:第一次是以蒸汽机的发明为代表,改变了长久以来的棉纺织业,人类进入"蒸汽时代":第二次是以汽车的发明和电学的发展为代表,人类的活动范围和时长都极大地扩展,人 ...
- 影响K8S Pod分配和调度策略的两大关键特性
在Kubernetes中有一个最复杂的调度器可以处理pod的分配策略.基于在pod规范中所提及的资源需求,Kubernetes调度器会自动选择最合适的节点来运行pod. 但在许多实际场景下,我们必须干 ...
- SuperSocket Code解析
SuperSocket1.6Code解析 Normal Socket System.Net.Sockets.dll程序集中使用socket类: 服务器: 创建socket:_socket = new ...
- 软件工程概论 网站开发要掌握的技术 &登录界面
1.网站系统开发需要掌握的技术 一.界面和用户体验(Interface and User Experience) 1.1 知道如何在基本不影响用户使用的情况下升级网站.通常来说,你必须有版本控制系统( ...
- IDEA工具java开发之 常用窗口
◆project窗口 ◆structure窗口 ◆todo窗口 ◆favorites窗口 ◆termimal窗口 此窗口默认打开的时cmd,所以才这里可以操作任何cmd可以操作的内容, 一般次 ...
- 基准测试--->sysbench
sysbench sysbench简介 sysbench是跨平台的基准测试工具,支持多线程,支持多种数据库:主要包括以下几种测试: cpu性能 磁盘io性能 调度程序性能 内存分配及传输速度 POSI ...
- 使用typescript改造koa开发框架
强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势,那么对常用的脚手架进行改造也就势在必行了. 接下来开始对基于 koa 框架的 node 后端脚手架进行改 ...
- spring cloud oauth2搭建认证中心与资源中心
一 认证中心搭建 添加依赖,如果使用spring cloud的话,不管哪个服务都只需要这一个封装好的依赖即可 <dependency> <groupId>org.springf ...