要求效果,鼠标悬停时有背景色,离开取消,原本表格是自带背景色的,不过是当前行的,这个不能要,取消掉,然后离开的时候取消掉,跟行的效果是一样的,再有就是点击的时候要把背景颜色停留上面
本来这种直接用下拉框最简单的事,但是产品为了好看设计成这样,只能忍了
首先 第一步,把行颜色取消
/deep/ table tbody tr:hover td{
background-color:#ffffff!important
}
这样鼠标悬停上面就没有任何效果了,再就给加单项加上同样的效果
第二步
/deep/ table tbody tr td:hover{
background-color:#cbe2ef!important
}
第三步 点击加取消
:customRow="customRow"
//
customRow(record){
return {
on: {
click: (event) => {
event.target.className === 'ant-table-item-active' ? event.target.className = '': event.target.className = 'ant-table-item-active'
},
}
}
},
加上这个类名就行了,
const vdom = document.querySelectorAll('.ant-table-item-active')
let personalityTagValue = []
vdom.forEach(dom => {
personalityTagValue.push(dom.innerHTML)
})
console.log('保存选项', personalityTagValue)
这样就能拿到所有的选项了