iView-admin2.0使用中在table表格中使用下拉菜单的方法
最近在开发一个CGS系统,按照客户方要求,在table表中展示的数据比较多,加上操作员需要很多按钮在页面操作,考虑到四五个按钮的放置问题,决定采用iview的Dropdown按钮,于是在网上各种查找,呵呵,参考render的写法,
效果如下:
不说了,直接上代码:
{
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'
}
},'删除'),
])
])
])
}
}
单纯为了记笔记,不喜勿喷!