vue3实现element 表格合并行，并修改hover样式

查询element plus官网，当鼠标移入时，只会显示合并的第一行

 想要的效果如下：

 

 

 利用饿了么UI 自带合并行/合并列计算方法 span-method

<el-table
      v-loading="listLoading"
      border
      :data="list"
      height="670"
      :row-class-name="rowClassName"
      :span-method="objectSpanMethod"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
    >

只需要在state中新建一个
resultData: [], //用于hover改变颜色的数组

 需要合并第几列，将 columnIndex === ‘几’，注意：列是从0开始计算

 // 合并相同行 row行 column列 rowIndex 行号 columnIndex 列号
      const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
        const dataProvider = state.list
        const cellValue = row[column.property]
        if (cellValue && columnIndex === 2) {
          // 上一条数据
          const prevRow = dataProvider[rowIndex - 1]
          // 下一条数据
          let nextRow = dataProvider[rowIndex + 1]
          // 当上一条数据等于下一条数据
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
          } else {
            let rowspan = 1
            while (nextRow && nextRow[column.property] === cellValue) {
              rowspan++
              nextRow = dataProvider[rowspan + rowIndex]
            }
            if (rowspan > 1) {
              return { rowspan, colspan: 1 }
            }
          }
        }
      }

对表格数据进行处理，添加一个order标识，将合并的数据，归为一组，

思路：将表格中第一个数据，添加order为1，如果当前数据和前一个数据中的title（看你合并的数据，如果是id，或者其他，则把title改为你合并的数据）相同，则将其归为一类，并将前一个数据order值赋值给当前数据，如果不同，则将这个数据order值+1，然后累加order

const handleData = () => {
        var order = 1
        let data = state.list
        for (let i = 0; i < data.length; i++) {
          if (i == 0) {
            data[i].order = order
            // 第一个数组
          } else {
            if (data[i]['title'] == data[i - 1]['title']) {
              // 此处是给相同的数据加相同order，具体判断条件可根据自己数据进行判断
              data[i]['order'] = data[i - 1]['order']
            } else {
              data[i]['order'] = order + 1
              order++
            }
          }
        }
        // console.log(state.list)
      }

在表格数据返回后调用 handleData方法

const getList = async () => {
        const {
          data: { list, total },
        } = await getinventoryList(state.queryForm)
        state.list = list
        handleData()
      }

创建一个鼠标移入事件

const enter = (row) => {
        // 表格的所有数据
        var table = state.list
        let result = table.filter((item) => {
        //返回鼠标移入的order值和table表格中所有数据的相匹配的数据
          return item.order == row.order
        })
        //state中新建一个resultData ，用来存储，需要改变颜色的数组
        state.resultData = result
      }

给相应的rowIndex添加类名

const rowClassName = ({ row, rowIndex }) => {
        let r = -1
        let d = -2
        state.resultData.forEach((item) => {
          if (item.order === row.order) {
            r = rowIndex
          }
        })
        if (rowIndex === r) {
          return 'hover-row'
        } else if (rowIndex === d) {
          return 'current-row'
        }
      }

//鼠标划出 清空样式
      const leave = () => {
        state.resultData = []
      }