Vxe UI vue vxe-table 實(shí)現(xiàn)表格單元格選中功能

在表格中實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊任意單元格，選取的功能，通過(guò) mouse-config 配置就可以開(kāi)啟單選功能，多選單元格選取功能需安裝插件支持。

代碼

參數(shù)說(shuō)明 mouse-config 鼠標(biāo)配置項(xiàng)：
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>