发现问题
神坑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