vue3 vxe-table 点击行,不显示选中状态,加上设置isCurrent: true就可以设置选中行的状态。

1、上个图,要实现这样的:

Vxe Table v4.6 官方文档

2、使用 row-config.isCurrent 显示高亮行,当前行是唯一的;用户操作点击选项时会触发事件 current-change

<template>
  <div>
    <p>
      <vxe-button @click="selectRowEvent">设置第二行选中</vxe-button>
      <vxe-button @click="clearSelectEvent">取消选中</vxe-button>
      <vxe-button @click="getCurrentEvent">获取高亮行</vxe-button>
    </p>

    <vxe-table
      border
      ref="tableRef"
      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>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table'

interface RowVO {
  name: string
  role: string
  sex: string
  age: number
  content: string
}

const tableRef = ref<VxeTableInstance<RowVO>>()

const tableData = ref<RowVO[]>([
  { name: 'Test1', role: 'Develop', sex: 'Man', age: 28, content: 'test abc' },
  { name: 'Test2', role: 'Test', sex: 'Women', age: 41, content: 'Guangzhou' },
  { name: 'Test3', role: 'PM', sex: 'Man', age: 32, content: 'Shanghai' },
  { name: 'Test4', role: 'Designer', sex: 'Women', age: 24, content: 'Shanghai' }
])

const currentChangeEvent: VxeTableEvents.CurrentChange<RowVO> = ({ rowIndex }) => {
  console.log(`行选中事件 ${rowIndex}`)
}

const selectRowEvent = () => {
  const $table = tableRef.value
  if ($table) {
    $table.setCurrentRow(tableData.value[1])
  }
}

const clearSelectEvent = () => {
  const $table = tableRef.value
  if ($table) {
    $table.clearCurrentRow()
  }
}

const getCurrentEvent = () => {
  const $table = tableRef.value
  if ($table) {
    VXETable.modal.alert(JSON.stringify($table.getCurrentRecord()))
  }
}
</script>

3、设置的时候,加上这个设置就可以了

:row-config="{ isCurrent: true, isHover: true}"

相关推荐
匹马夕阳1 小时前
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
前端·javascript·vue.js
你熬夜了吗?1 小时前
日历热力图,月度数据可视化图表(日活跃图、格子图)vue组件
前端·vue.js·信息可视化
沈梦研9 小时前
【Vscode】Vscode不能执行vue脚本的原因及解决方法
ide·vue.js·vscode
轻口味9 小时前
Vue.js 组件之间的通信模式
vue.js
fmdpenny12 小时前
Vue3初学之商品的增,删,改功能
开发语言·javascript·vue.js
涔溪12 小时前
有哪些常见的 Vue 错误?
前端·javascript·vue.js
亦黑迷失14 小时前
vue 项目优化之函数式组件
前端·vue.js·性能优化
计算机-秋大田15 小时前
基于SpringBoot的高校教师科研的设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
eason_fan15 小时前
分析vue3源码23(异步组件实现)
vue.js·前端框架·源码阅读
BigData-017 小时前
vue视频流播放,支持多种视频格式,如rmvb、mkv
前端·javascript·vue.js