iView的Table中使用Render渲染气泡提示Poptip组件

释放双眼,带上耳机,听听看~!

iView 就不多说了,最近一直在苦苦吃饼;在 Table 中想要渲染 Poptip 组件,直接使用 Render 来操作

渲染一个自定义列(默认的)

{
  title: '操作',
  key: 'action',
  width: 150,
  align: 'center',
  render: (h, params) => {
    return h('div', [
      h('Button', {
        props: { type: 'primary', size: 'small'  },
        style: { marginRight: '5px' },
        on: {
          click: () => {
              this.$Message.info('点击了【查看】按钮')
          }
        }
      }, '查看'),
      h('Button', {
        props: { type: 'error', size: 'small'
        },
        on: {
          click: () => {
              this.$Message.info('点击了【删除】按钮')
          }
        }
      }, '删除')
    ]);
  }
},

在某些需求中,它并不满足我们,当然,您可以在点击的时候调取 Modal 对话框也是可以的,但我并没有这么做,我们稍微改造下

渲染 Poptip 组件形式

{
title: '操作',
  key: 'action',
  fixed: 'right',
  width: 150,
  render: (h, params) => {
    return h('div', [
      h('Button', {
        props: { type: 'primary', size: 'small' },
        style: { marginRight: '5px' },
        on: {
          click: () => {
            this.show(params.index)
          }
        }
      }, '编辑'),
      h('Button', { props: {type: 'error', size: 'small'} },
        [
          h('Poptip',
            { props: { confirm: true, transfer: true, title: '删除后不可恢复,确定要删除吗!', type: 'error', size: 'small' },
              on: {
                'on-ok': () => {
                  this.$Message.info('点击了【确定】按钮')
                },
                'on-cancel': () => {
                  this.$Message.info('点击了【取消】按钮')
                }
              }
            }, '删除'
          )
        ]
      )
    ])
  }
}

看下效果

PS:吃饼道路很艰辛

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧