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)
      }
    }

原文地址:https://www.cnblogs.com/nayek/p/12331643.html

时间: 2024-07-29 02:19:50

Element-UI ( Dropdow )下拉菜单组件command传输对象的相关文章

n级联动下拉菜单组件

这是最近在写的一套前端库中的一个组件,支持n级联动的下拉菜单,在这里跟大家分享一下. 使用方法如下: <div id="test"> <p>省份:<select></select></p> <p>城市:<select></select></p> <p>商家:<select></select></p> </div> <

使用vue来开发一个下拉菜单组件(1)

一.新建demo工程 vue init webpack-simple demo 添加src/mixins/emitter.js文件(见前几篇博文) 安装font-awesome字体库: cnpm install font-awesome --save 配置webpack.config.js,引入字体文件: { test: /\.(otf|eot|ttf|woff|woff2)$/, loader: 'file-loader' } 在src/main.js中引入font-awesome: impo

解决element生成的下拉菜单,不在父级之下,而是在body之下,通过父级控制该下拉菜单的样式,达到不跟别的地方冲突的目的

项目中存在多个下拉菜单,每个下拉菜单的样式可能不同 不能直接拿到element里面的类名来修改,这样会导致全局统一 在下拉菜单上定义一个父级类名,通过这个父级类名来定义这些下拉菜单的样式,达到私有化 遇到问题,生成的下拉菜单跟父类不在同一个节点,无法通过父级类来指定样式 解决方案:在下拉菜单的结构上添加 ref,页面加载后动态添加父级类名 原文地址:https://www.cnblogs.com/wuhefeng/p/12530803.html

Bootstrap按钮式下拉菜单

前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜单 概述 按钮式下拉菜单其实就是普通的下拉菜单,唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”,display从block换成了inline-block <div class="btn-group"> <button type=&qu

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

深入理解BootStrap Item8 -- 下拉菜单

1.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ? LESS版本:对应的源码文件为 dropdowns.less ? Sass版本:对应的源码文件为 _dropdowns.sass ? 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

Bootstarp学习(八)下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

Mega Dropdown - 带子分类的响应式下拉菜单

当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带二级分类的响应式下拉菜单组件,简单易用. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 1

安卓微信中bootstrap下拉菜单无法正常工作的解决方案

bootstrap下拉菜单组件描述:http://v3.bootcss.com/components/#dropdowns 问题环境:安卓4.4.2,微信6.2内置浏览器,bootstrap 3.1.1.1 问题描述:bootstrapV3的下拉菜单组件,在ios的微信浏览器中表现正常,但安卓微信浏览器中无法正常触发,安卓非微信浏览器可以触发 问题触发条件:未知 解决方案:去除button元素的属性data-toggle="dropdown",自己另外写一小段事件监听代码来切换div.