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

vue3+ts+vite+element plus 实现table勾选、点击单行都能实现多选

需求:table的多选栏太小,点击的时候要瞄着点,不然选不上,要求实现点击单行实现勾选

<ElTableborder:data="tableDataD"style="width: 100%"max-height="500"ref="multipleTableRef"@selection-change="handleSelectionChange"@row-click="handleRowChick"><el-table-column type="selection" width="55" /><el-table-column type="index" width="50" /><el-table-column prop="variableName" label="Variable Name" /><el-table-column prop="weight" label="Weight" /></ElTable>const weightList = ref([])
const handleSelectionChange = (val: any) => {weightList.value = valconsole.log(weightList)
}const handleRowChick = (row) => {const selected = weightList.value.some((item) => item.variableName === row.variableName)if (!selected) {weightList.value.push(row)multipleTableRef.value.toggleRowSelection(row)} else {const weightListNew = weightList.value.filter((item) => {return item.variableName !== row.variableName})weightList.value = weightListNewmultipleTableRef.value.toggleRowSelection(row, false)}
}

http://www.lryc.cn/news/259322.html

相关文章:

  • 在WPF窗口中增加水印效果
  • wget下载到一半断了,重连方法
  • Docker笔记:docker compose部署项目, 常用命令与负载均衡
  • Java单元测试:JUnit和Mockito的使用指南
  • 缓存雪崩问题与应对策略
  • python编程需要的电脑配置,python编程用什么电脑
  • 目标检测YOLO实战应用案例100讲-基于深度学习的跌倒检测(续)
  • 05-命令模式
  • Docker安全及日志管理
  • 【LeetCode每日一题】152. 乘积最大子数组
  • Python 反射
  • HTML基本网页制作
  • Tcl语言语法精炼总结
  • [GPT]Andrej Karpathy微软Build大会GPT演讲(下)--该如何使用GPT助手
  • 路由器静态路由的配置
  • [Firefly-Linux] RK3568在Ubuntu上安装内核头文件实现本地编译驱动程序
  • RabbitMQ Streams 详解
  • 跨境电商如何利用跨境客服软件提升销售额
  • css/less/scss代码注意事项
  • Git应用——代码提交规范 feat ,fix ,style
  • TDengine Kafka Connector将 Kafka 中指定 topic 的数据(批量或实时)同步到 TDengine
  • 单片机的低功耗模式介绍
  • 基于SSM实现的精品课程网站
  • 广州旅游攻略(略说一二)
  • C++STL的list模拟实现
  • django--分页功能
  • centOS安装bochsXshell连接centos启动可视化界面
  • mac m2芯片 安装nginx + php + mysql
  • vue axios 使用
  • 使用docker实现logstash同步mysql到es