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

2021-12-27 16:03:16 阅读：295 来源： 互联网

标签：hover const rowIndex element state vue3 data order row

查询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 = []
      }

标签：hover,const,rowIndex,element,state,vue3,data,order,row
来源： https://blog.csdn.net/qq_42036096/article/details/122172614

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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