使用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学习笔记之计算属性与侦听器用法

    Vue学习笔记之计算属性与侦听器用法

    这篇文章主要介绍了Vue学习笔记之计算属性与侦听器用法,结合实例形式详细分析了vue.js计算属性与侦听器基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2019-12-12
  • Vuejs第十一篇组件之slot内容分发实例详解

    Vuejs第十一篇组件之slot内容分发实例详解

    这篇文章主要介绍了Vuejs第十一篇之slot内容分发组件详解的相关资料
    2016-09-09
  • vue.js移动端tab组件的封装实践实例

    vue.js移动端tab组件的封装实践实例

    本篇文章主要介绍了vue.js移动端tab的封装实践实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue自定义指令v-focus实例详解

    Vue自定义指令v-focus实例详解

    这篇文章主要为大家介绍了Vue自定义指令v-focus实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • uni-app无限级树形组件简单实现代码

    uni-app无限级树形组件简单实现代码

    文章介绍了如何在uni-app中简单封装一个无限级树形组件,该组件可以无线嵌套,展开和收缩,并获取子节点数据,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-01-01
  • Vue实现通知或详情类弹窗

    Vue实现通知或详情类弹窗

    这篇文章主要为大家详细介绍了Vue实现通知或详情类弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)

    vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了)

    在使用reactive定义的变量时,直接赋值会失去响应式,为了清空 filters并确保响应式,可以使用Object.assign({}, filters)或者遍历对象逐个清除属性,本文介绍vue3中reactive的对象清空所引发的问题解决方案(清空不了和清空之后再去赋值就赋值不了),感兴趣的朋友一起看看吧
    2025-02-02
  • vue+elementui实现拖住滑块拼图验证

    vue+elementui实现拖住滑块拼图验证

    这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route的各种语法

    vue this.$router和this.$route区别解析及路由传参的2种方式 && this.$route

    this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法,本文给大家介绍Vue中this.$router与this.$route的区别 及push()方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10

最新评论