zoukankan      html  css  js  c++  java
  • Vue+iview在render函数中添加Poptip提示操作

    前言:在项目中用到的表格插件中,在最后一栏的‘操作’中我设置了‘编辑’和‘删除’按钮,那么在选择某条数据删除的时候不仅要检查是否选中,提示是否删除还是很有必要的

    1.没加Poptip之前是这样写的:

    {
    title: '操作',
    key: 'action',
    150,
    align: 'center',
    render: (h, params) => {
    return h('div', [
    h('Icon', {
    class: 'deleteHover',
    props: {
    type: 'md-trash'
    },
    attrs: {
    title: '删除'
    },
    on: {
    click: () => {
    this.remove(params.row)
    }
    }
    }, '删除')
    ]);
    }
    }
    2.加Poptip后这样写:

    {
    title: '操作',
    key: 'action',
    150,
    align: 'center',
    render: (h, params) => {
    return h('div', [
    h('Poptip', {
    props: {
    placement: 'left-start',
    confirm: true,
    transfer: true,
    title: '确定删除吗?',
    },
    on: {
    'on-ok': () => {
    this.remove(params)
    },
    'on-cancel': () => {
    }
    }
    }, [
    h('Icon', {
    class: 'deleteHover',
    props: {
    type: 'md-trash'
    },
    attrs: {
    title: '删除'
    },
    style: {
    cursor: 'pointer'
    },
    on: {
    click: () => {
    }
    }
    }, '删除')
    ])
    ]);
    }
    }
     

  • 相关阅读:
    订单生成案例详解
    分页案例详解
    简单的多条件查询案例
    删除选中案例详解
    转账汇款案例
    登录操作记住用户名实现
    根据自定义异常来回显错误信息
    会话技术cookie和session详解
    JDBC
    Netty入门教程——认识Netty
  • 原文地址:https://www.cnblogs.com/guandekuan/p/12563949.html
Copyright © 2011-2022 走看看