Material UI 带复选框表格获取选中值(索引)

本文档详细记录了解决Material UI框架中带复选框表格选中事件异常的问题。作者发现官方提供的`md-selected`事件在取消选中时触发,而非期望的选中时触发,并在首次选中时不执行。通过研究源码,作者找到了一个能获取选中项数量的方法,并通过判断复选框的类名`md-selected`实现了获取选中值(索引)的功能。
摘要由CSDN通过智能技术生成

vue+Material UI 带复选框表格获取选中值(索引)

发现问题

神坑UI框架–Material,这款框架我不晓得为什么会这么坑,有这么多的问题为什么会被推出来,真的是除了UI好看之外其余几乎全是鸡肋,比如我现在遇到的:Material自带的table 复选框问题,官方提供了带复选框的表格:
在这里插入图片描述
同时提供了一个事件方法以及一个属性:
在这里插入图片描述
这个方法@md-selected=“onSelect”,它是一个选中事件,当你选中复选框的时候会执行这个事件,但是!!!它有问题!!!它竟然是一个取消选中的时候触发的事件,excuse me???我要你取消选中事件干什么???我要你选中事件啊!而且它还有bug!它在第一次的时候不会执行,下面这张截图我截自Material的官方文档:
在这里插入图片描述
我一度陷入了无语的状态,面临着两个选择,第一个:不用Material提供的这个复选框功能,那意味着我要自定义表头,这无疑是一个很麻烦的选择,第二个:改造这个md-selected方法,在思考了1分29秒36之后,我决定选择第二种。
在这里插入图片描述

解决

我找了很久也没有找到能替代md-selected的方法——选中事件,后来在看官方提供的案例源码的时候我发现了一个这个方法:
在这里插入图片描述
这个方法在每次点击复选框的时候都会执行,它接收一个参数 count,这个count代表目前选中的复选框的个数,嗯???个数???我要个数干啥???你给我个索引也好啊!!我尝试更换为item参数,但是,undefined,虽然不是我想要的结果但是也算是有思路了,我在这个方法里继续写就行。
我的思路是这样:在这个方法里去获取哪一个复选框被选中了,我发现被选中的复选框会有一个叫做“md-selected”的类名,OJ8K,就他了,下面我们来改造(代码以官方案例为基础修改,我修改的核心代码已标记注释,请注意查看):

<template>
  <div class="memberList">
    <md-table v-model="people" md-card @md-selected="onSelect">
      <md-table-toolbar>
        <h1 class="md-title">With auto select and alternate headers</h1>
      </md-table-toolbar>

      <md-table-toolbar slot="md-table-alternate-header" slot-scope="{ count }">
        <div class="md-toolbar-section-start">{
   {
    getAlternateLabel(count) }}</div
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值