iView-admin2.0使用中在table表格中使用下拉菜单的方法

最近在开发一个CGS系统,按照客户方要求,在table表中展示的数据比较多,加上操作员需要很多按钮在页面操作,考虑到四五个按钮的放置问题,决定采用iview的Dropdown按钮,于是在网上各种查找,呵呵,参考render的写法,

效果如下:

iView-admin2.0使用中在table表格中使用下拉菜单的方法

不说了,直接上代码:

{
          title: '操作',
          key: 'Operation',
          width: 148,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Dropdown',{
                 props:{
                  trigger:"click"
                },
                on:{
                  'on-click':(value)=>{
                    console.log(value) //此处的value和下面DropdownMenu选项的name对应
                    if(value == "submit"){
                      this.submit(params.index)
                    }else if(value == 'revise' ){
                      this.show(params.index) 
                    } else {                
                      this.remove(params.index)
                    }
                  }
                }
              },[
                h('Button',{
                  props:{
                    type: 'primary'
                  }
                },[
                  h('span','操作菜单'),//span中的内容
                    h('Icon',{
                      props:{
                        type: 'md-arrow-dropdown'
                      }
                    })
                  ]),
                  h('DropdownMenu',{
                    slot:'list'
                  },[
                    h('DropdownItem',{
                      props:{
                        name: 'submit'
                      }
                    },'提交'),
                    h('DropdownItem',{
                      props:{
                        name: 'revise'
                      }
                    },'修改'),
                    h('DropdownItem',{
                      props:{
                        name: 'delete'
                      }
                    },'删除'),
                 ])
              ])    
            ])
          }
        }

 

单纯为了记笔记,不喜勿喷!