当前位置：首页 > news >正文

Vxe UI vue vxe-table 实现表格单元格选中功能

news 2025/8/15 0:21:18

在表格中实现鼠标点击任意单元格，选取的功能，通过 mouse-config 配置就可以开启单选功能，多选单元格选取功能需安装插件支持。

在这里插入图片描述

代码

参数说明 mouse-config 鼠标配置项：
selected：是否启用

<template><div><vxe-tableborderheight="500":mouse-config="{selected: true}":data="tableData"><vxe-column type="seq" width="70"></vxe-column><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-table></div>
</template><script lang="ts" setup>
import { ref } from 'vue'interface RowVO {id: numbername: stringrole: stringsex: stringage: numberaddress: string
}const tableData = ref<RowVO[]>([{ 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: 23, address: 'test abc' },{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },{ id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },{ id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' },{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 26, address: 'test abc' }
])
</script>