vue iview table列表操作 render(根据不同状态显示不同按钮)
今天在增加操作按钮时遇到了问题,网上找了很多方法,最后找到一个不错的解决方案,以前根据这一行的某个值判断只用了if(字段===“值”),但是条件增加,该方法不能很好的支持业务。话不多说上干货:这次因为要根据 用户状态、用户角色判断,所以,render: (h, params) => {//设置值,如果为这个值,则显示这个 类似于java的三元运算符,R如果不符合条件,则显示:后面let ch
·

今天在增加操作按钮时遇到了问题,网上找了很多方法,最后找到一个不错的解决方案,以前根据这一行的某个值判断只用了if(字段===“值”),但是条件增加,该方法不能很好的支持业务。
话不多说上干货:
这次因为要根据 用户状态、用户角色判断,所以,
render: (h, params) => {
//设置值,如果为这个值,则显示这个 类似于java的三元运算符,R如果不符合条件,则显示:后面
let chart = params.row.characterName === '***'
let status = params.row.status === '***'
return h('div', {style: {width: '100%'}}, [
chart ? h('a',{
props: {
type: 'text',
size: 'small'
},
style:{
marginRight:'5px',
color: '#17c1dc'
},
on: {
click: () => {
this.方法(params)
}
}
},'变为普通账户') : h('a', {
props: {
type: 'text',
size: 'small'
},
style:{
marginRight:'5px'
},
on: {
click: () => {
this.方法(params)
}
}
}, '变更为VIP'),
status ? h('a', {
props: {
type: 'text',
size: 'small'
},
style:{
marginRight:'5px'
},
on: {
click: () => {
this.方法(params)
}
}
}, '禁用') : h('a', {
props: {
type: 'text',
size: 'small'
},
style:{
marginRight:'5px'
},
on: {
click: () => {
this.方法(params)
}
}
}, '启用'),
])
}
更多推荐



所有评论(0)