Material UI 带复选框表格获取选中值（索引）

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><div class="md-toolbar-section-end"><md-button class="md-icon-button"><md-icon>delete</md-icon></md-button></div></md-table-toolbar><md-table-row slot="md-table-row" slot-scope="{ item }" :md-disabled="item.name.includes('Stave')" md-selectable="multiple" md-auto-select><md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell><md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell><md-table-cell md-label="Gender" md-sort-by="gender">{{ item.gender }}</md-table-cell><md-table-cell md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell></md-table-row></md-table><p>Selected:</p>{{ selected }}</div>
</template><script>export default {name: 'TableMultiple',data: () => ({selected: [],people: [{name: 'Shawna Dubbin',email: 'sdubbin0@geocities.com',gender: 'Male',title: 'Assistant Media Planner'},{name: 'Odette Demageard',email: 'odemageard1@spotify.com',gender: 'Female',title: 'Account Coordinator'},{name: 'Lonnie Izkovitz',email: 'lizkovitz3@youtu.be',gender: 'Female',title: 'Operator'},{name: 'Thatcher Stave',email: 'tstave4@reference.com',gender: 'Male',title: 'Software Test Engineer III'},{name: 'Clarinda Marieton',email: 'cmarietonh@theatlantic.com',gender: 'Female',title: 'Paralegal'}]}),methods: {//此处为我修改之后的代码-----------------------onSelect(items) {items.length == 0 ? this.selected = [] : "";items.length == 0 ? console.log(this.selected) : "";},getAlternateLabel (count) {setTimeout(function () {const memberListDom = document.getElementsByClassName("memberList")[0];let selectDomArr = memberListDom.getElementsByClassName("md-table-row");let selectArr = [];for (var i = 0; i < selectDomArr.length; i++) {selectDomArr[i].className.indexOf("md-selected") > -1 ? selectArr.push(i) : "";}this.selected = selectArr;console.log(this.selected);},100);},}}
</script><style lang="scss" scoped>.md-table + .md-table {margin-top: 16px}
</style>

下面我们来看下效果：

OK，完事

写在最后

在使用Material的过程中我的头发都快让我薅完了，这款插件真的。。emmmm。。。哎。。。一言难尽。
希望这篇文档能给您带来帮助，感谢阅读。