最近在做项目时,使用iview做后台管理,有个功能是在搜索出来的用户表格行尾,加一列勾选框,勾选某一个用户,但是iview提供的单选高亮颜色较浅,识别度不高,最后使用render渲染出来这个样式,可以勾选或者取消勾选
{
title: ' ',
align: 'center',
key: 'checkBox',
render: (h, params) => {
return h('div', [
h('Checkbox', {
props: {
value: params.row.checkBox
},
on: {
'on-change': e => {
this.data1.forEach(items => {
// 先取消所有对象的勾选,checkBox设置为false
this.$set(items, 'checkBox', false)
})
// 再将勾选的对象的checkBox设置为true
this.data1[params.index].checkBox = e
this.edit(params.row, e)
}
}
})
])
}
}