使用vxe-table合并单元格后增加选中效果

 更新时间:2022年09月13日 16:36:12   作者:zqian1994  
这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vxe-table合并单元格后增加选中效果

<vxe-table
      :data="retrievalList"
      :row-class-name="setRowClass"
       @cell-click="selectRow">
     <vxe-column field="name" title="姓名"></vxe-column>
</vxe-table>

后端返回的JSON格式 (合并单元格需要对数据处理后,通过setMergeCells合并)

注:

相关单元格全部选中

效果图:

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON数据
        retrievalList: [],  //  格式化后的数据 [{},{},{}]
    }
 },
 methods: {
	//  设置已选中的单元格类名
    setRowClass({row}) {
      //  patId为JSON外层唯一主键,选中后根据主键动态设置类
      if (row.patId === this.currentRow.patId) {
        return 'current-pat';
      }
    },
    //  单击选中
    selectRow({row}) {
      //  获取当前合并的单元格整体信息,此处为多条数据的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
    }
 }
//  scss
.vxe-table {
      .current-pat, .current-pat > td {
        background-color: #CBECFC !important;
      }
}

所选单元格整体增加背景色,但仅选中单元格特殊标识

注 :

(1)第一列被合并单元格选中样式默认跟随合并后的第一行。

(2)可自行变形,使首列单元格底色与单项选中的单元格一致。

(3)此处存在个BUG,首次点击单元格时未出现选中效果;由于已选择第一种方案,此处未深究,仅做记录。

 data() {
    return {
    	sourceList: [],  //  后端返回的JSON数据
        retrievalList: [],  //  格式化后的数据 [{},{},{}]
    }
 },
 methods: {
	//  设置行类名
    setRowClass({row}) {
      if (row.itemId === this.firstItemId) {
      	//  itemId为JSON内层nurseOptPatVoList内唯一主键,用于设置被合并列单元格底色
        return 'current-first'
      } else if (row.patId === this.currentRow.patId) {
        //  patId为JSON外层唯一主键,选中后根据主键动态设置类
        return 'current-pat'
      }
    },
    //  单击选中
    selectRow({row}) {
      //  获取当前合并的单元格整体信息,此处为多条数据的集合
      this.currentRow = this.sourceList.find(item => item.patId === row.patId);
      //  获取当前合并的单元格首条信息
      let firstItem = this.retrievalList.find(item => item.patId === row.patId);
      this.firstItemId = firstItem.itemId;
    }
.vxe-table {
      .current-pat {
        background-color: #f00;
      }
      .current-first {
        // 此处不使用important是为了避免背景与选中效果冲突
        background-color: #f00; 
        & > .vxe-body--column:first-child {
          background-color: #f00 !important;
        }
      }
}

vxe-table自动合并单元格

<vxe-table
    @cell-click="handleClickCell"
    :span-method="spanMethods"  //自动合并单元格
    :data="tableData2">
</vxe-table>
spanMethods({row, $rowIndex, column, data}){
      let fields = ["pcsname", "fjname"]
      let cellValue = row[column.property]
      if (cellValue && fields.includes(column.property)) {
        let prevRow = data[$rowIndex - 1]
        let nextRow = data[$rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return {rowspan: 0, colspan: 0}
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = data[++countRowspan + $rowIndex]
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1}
          }
        }
      }
    },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue运用transition实现过渡动画

    Vue运用transition实现过渡动画

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果,感兴趣的朋友一起看看吧
    2019-05-05
  • Vue中代码编辑器与实时预览功能

    Vue中代码编辑器与实时预览功能

    CodeMirror提供了强大的代码编辑功能,而Vue.js使得组件的创建和数据绑定变得非常简单,当用户编辑代码时,实时预览会根据代码的变化进行更新,从而为用户提供了一个交互式的编程环境,这篇文章主要介绍了Vue中如何进行代码编辑器与实时预览,需要的朋友可以参考下
    2023-10-10
  • antd vue v-decorator的取值与赋值问题

    antd vue v-decorator的取值与赋值问题

    这篇文章主要介绍了antd vue v-decorator的取值与赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue实现图片上传功能

    vue实现图片上传功能

    这篇文章主要为大家详细介绍了vue实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Vue3中watch的使用详解

    Vue3中watch的使用详解

    这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法,通过多种情况实例代码相结合给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • vue中通过使用$attrs实现组件之间的数据传递功能

    vue中通过使用$attrs实现组件之间的数据传递功能

    组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用。这篇文章主要介绍了vue中通过使用$attrs实现组件之间的数据传递,需要的朋友可以参考下
    2019-09-09
  • 如何使用HBuilderX把vue项目打包成apk

    如何使用HBuilderX把vue项目打包成apk

    这篇文章主要介绍了如何使用HBuilderX把vue项目打包成apk,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解

    Vue中使用addEventListener添加事件、removeEventListener移除事件的示例详解

    最近在项目中需要用到addEventListener监听滚动条滚动的高度,所以就研究了一下在vue中是怎么进行事件监听的,添加事件和移除事件结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-12-12
  • vue实现集成腾讯TIM即时通讯

    vue实现集成腾讯TIM即时通讯

    最近在做商城类的项目,需要使用到客服系统,用户选择的腾讯IM即时通信,所以本文主要介绍了vue实现集成腾讯TIM即时通讯,感兴趣的可以了解一下
    2021-06-06
  • vue2 router 动态传参,多个参数的实例

    vue2 router 动态传参,多个参数的实例

    下面小编就为大家带来一篇vue2 router 动态传参,多个参数的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论