文档章节

表格内每行Popover 弹出框

z
 zeapane
发布于 03/04 10:45
字数 192
阅读 1
收藏 0

封装组件

<template>
  <el-popover placement="top" width="180" v-model="delDialog">
        <p>{{ tips }}</p>
        <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="delDialog = false">取消</el-button>
        <el-button type="primary" size="small" @click="handleOkClick">确定</el-button>
        </div>

        <el-button type="primary" size="small" slot="reference">开锁</el-button>
    </el-popover>
</template>

<script>
export default {
  name: 'ZPopover',
  data() {
    return {
      delDialog: false
    }
  },
  props: {
    tips: {
      type: String,
      default: '确定执行此操作?'
    },
    index: {
      type: Number
    }
  },
  methods: {
    handleOkClick() {
      this.$emit('okClick', this.index)
    }
  }
}
</script>

引用

import ZPopover from '@/components/ZPopover'

export default {
  components: {
    wangeditor,
    ZPopover
  },
  ...

模板使用

<el-table-column label="创建时间">
          <template slot-scope="slotProps" width="240">{{slotProps.row.createTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="slotProps">
            <z-popover tips="确定发送远程开锁指令?" :index="slotProps.$index" @okClick="unLock"></z-popover>
            <br>
            <el-button type="text" @click="relate(slotProps.$index)">开锁记录</el-button>
          </template>
        </el-table-column>

© 著作权归作者所有

上一篇: sitewhere2.0分析
z
粉丝 0
博文 23
码字总数 12393
作品 0
郑州
私信 提问
缩略图鼠标经过放大(Element表格循环输出多张图片)

1.代码: 2.简单解释 <e-popover>标签是一个Popover弹出框 <e-popover>标签内的属性,placement指出现的位置、title指标题名称、trigger指触发的方式、width指弹出框的宽度、v-for指令请自行...

uug
04/10
22
0
Popover 弹出框用法总结及其弹出隐藏问题

引言 最近项目中多次用到了Popover弹出框,在使用时,也遇到了一些坑,比如如何控制显示和隐藏,及在表格数据中如何针对当条数据进行显示和隐藏,所以对Popover相关知识做了一个总结。 Popo...

启晨1991
11/02
0
0
bootstrap的弹出提示(popover),有几个问题要问

我用的bootstrap里的popover弹出提示 遇到几个问题,在popover提示框里 1、怎么放置按钮和图片? 2、怎么控制提示框大小? 3、怎么控制某行文字靠右

jack_jones
2013/07/04
8.4K
2
在bootstrap中popover.js,popover英文是什么意思?

在bootstrap中popover.js,popover英文是什么意思? popover ['pɒp,әuvә] n. 膨松饼,薄空心酥饼(因过松泡,常涨出烤型外); 明显看是不正确的翻译,很烦闷,死记硬记单词 。 图灵计算机词...

sinat_34719507
2016/12/18
0
0
bootstrapx-popoverx

Popoverx 是Bootstrap Popover控件的增强版,Popoverx主要有如下增强: 提供onShown和onHidden回调,具有更友好的Ajax交互方式 提供单实例方式的Popover弹出框 智能处理显示位置,重新调整P...

史涛
2013/01/10
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

你知道多少this,new,bind,call,apply?那我告诉你

那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了。如果你不了解,那还不赶快去复习复习,上网查阅资料啥的! 通过call,apply,bind可以改变thi...

达达前端小酒馆
今天
4
0
设计模式之命令模式

命令模式的类图 其中的角色有: Client 客户端。只依赖于调用者Invoker、接收者Receiver、以及Command(网上找的图片这里没有画出来),不用关注接收者如何执行命令,只需要告诉调用者需要执行...

陈年之后是青葱
今天
7
0
2. 彤哥说netty系列之IO的五种模型

你好,我是彤哥,本篇是netty系列的第二篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 本文将介绍linux中的五种IO模型,同时也会介绍阻塞/非阻塞与同步/异步的区别。 何...

彤哥读源码
今天
5
0
OSChina 周四乱弹 —— 喵的波粒二象性

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @ 小小编辑推荐:《水墨兰亭》- 李志辉 《水墨兰亭》- 李志辉 手机党少年们想听歌,请使劲儿戳(这里) @巴拉迪维 :卧室里采光要足够好,这样...

小小编辑
今天
34
1
前后端分离接口规范

最近在开发,遇到前后端关于Boolean类型的参数传参和接收的问题: 场景:后台会根据用户是否出车/是否出司机(Boolean类型)来决定后端的业务逻辑(比如费用的计算),前端使用JSON字符串类型...

code-ortaerc
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部