利用antd 表格实现内容多选的效果

要求效果,鼠标悬停时有背景色,离开取消,原本表格是自带背景色的,不过是当前行的,这个不能要,取消掉,然后离开的时候取消掉,跟行的效果是一样的,再有就是点击的时候要把背景颜色停留上面

本来这种直接用下拉框最简单的事,但是产品为了好看设计成这样,只能忍了
首先 第一步,把行颜色取消

  /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)

这样就能拿到所有的选项了