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

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

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

代码

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

<template><div><vxe-tableborderheight="500":mouse-config="{selected: true}":data="tableData"><vxe-columntype="seq"width="70"></vxe-column><vxe-columnfield="name"title="Name"></vxe-column><vxe-columnfield="sex"title="Sex"></vxe-column><vxe-columnfield="age"title="Age"></vxe-column></vxe-table></div></template><scriptlang="ts"setup>import{ ref }from'vue'interfaceRowVO{
  id: number
  name: string
  role: string
  sex: string
  age: number
  address: 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>