vxetable的高亮行不显示的问题及解决

 更新时间:2025年05月06日 10:45:04   作者:Lysun001  
这篇文章主要介绍了vxetable的高亮行不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vxetable的高亮行不显示

在开发过程中,我遇到了一个需求,就是有两个表格,点击 表格1 的行 动态加载 表格2 的内容,同时,表格1 被点击的行需要高亮显示。

由于有两个表格,所以我给每个表格都加了一个 key 值,但是,我按照官网的文档设置了 :row-config="{isCurrent: true, isHover: true}" 属性,可是当点击的时候,高亮行仍然不会显示

解决方法

把需要有 高亮行 的那个表格 的 key 值去掉就好了

案例代码

<template>
  <div>
    <!-- 把下面这个表格的 :key="Math.random()" 删除就可以了-->
    <vxe-table :key="Math.random()"
               border
               ref="xTable"
               height="300"
               :row-config="{isCurrent: true, isHover: true}"
               :data="tableData"
               @current-change="currentChangeEvent">
      <vxe-column field="name"
                  title="Name"></vxe-column>
      <vxe-column field="sex"
                  title="Sex"></vxe-column>
      <vxe-column field="age"
                  title="Age"></vxe-column>
      <vxe-column field="address"
                  title="Address"
                  show-overflow></vxe-column>
    </vxe-table>
    <!-- 下面这个表格的 :key="Math.random()" 不用删 -->
    <vxe-table :key="Math.random()"
               border
               ref="xTable"
               height="300"
               :row-config="{isCurrent: true, isHover: true}"
               :data="tableData1">
      <vxe-column field="name"
                  title="Name"></vxe-column>
      <vxe-column field="sex"
                  title="Sex"></vxe-column>
      <vxe-column field="age"
                  title="Age"></vxe-column>
      <vxe-column field="address"
                  title="Address"
                  show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ],
      tableData1: []
    }
  },
  methods: {
    currentChangeEvent ({ row }) {
      console.log(row)
      //   模拟请求动态获取 表格2 的表格数据
      setTimeout(() => {
        this.tableData1 = [
          { id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
          { id: 10006, name: 'Test6', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10007, name: 'Test7', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
        ]
      }, 100)
    }
  }
}
</script>

<style>
</style>

总结

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

相关文章

  • 在Vue3中使用provide和inject进行依赖注入的代码详解

    在Vue3中使用provide和inject进行依赖注入的代码详解

    在现代前端开发中,Vue.js已经成为了非常流行的框架之一,它提供了极大的灵活性和可维护性,今天我们要探讨的是Vue 3中的provide和inject功能,这是一种用于在组件树中进行依赖注入的方法,需要的朋友可以参考下
    2024-06-06
  • vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    这篇文章主要介绍了vue中使用vue-seamless-scroll插件无缝滚动,支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换,需要的朋友可以参考下
    2022-06-06
  • Vue日期时间选择器组件使用方法详解

    Vue日期时间选择器组件使用方法详解

    这篇文章主要为大家详细介绍了Vue日期时间选择器组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue 解决遍历对象显示的顺序不对问题

    vue 解决遍历对象显示的顺序不对问题

    今天小编就为大家分享一篇vue 解决遍历对象显示的顺序不对问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 如何解决element-ui动态加载级联选择器默认选中问题

    如何解决element-ui动态加载级联选择器默认选中问题

    这篇文章主要介绍了如何解决element-ui动态加载级联选择器默认选中问题,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • 解决vue组件销毁之后计时器继续执行的问题

    解决vue组件销毁之后计时器继续执行的问题

    这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 解决echart在vue中id重复问题

    解决echart在vue中id重复问题

    这篇文章主要介绍了解决echart在vue中id重复问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 一文秒懂vue-property-decorator

    一文秒懂vue-property-decorator

    这篇文章主要介绍了vue-property-decorator的简单知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue 图标选择器的实例代码

    vue 图标选择器的实例代码

    本文通过实例代码给大家介绍了vue 图标选择器的相关知识,图文实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-11-11
  • vue cli中env的使用指南

    vue cli中env的使用指南

    众所周知,一个项目在开发、测试与生产环境的各种配置变量是不一样的,但在vue cli 3中通过指令vue create xxx创建的项目取消了默认的 config 和 build 文件夹,这导致刚入手的小伙伴不知道在哪儿配置环境变量,不过官方也提供了相应的配置方法,本文就来介绍一下
    2021-08-08

最新评论