我正在参加「掘金·启航计划」
前情提要
二开项目中的一个模块的时候遇到了一个需求：当选中某一行的checkbox的时候对列表中所有的数据进行一次筛选，当某条数据中某个字段的值与被选中的那一项不一致时便将其checkbox设置为disabled。
这个需求看着不是很难，也不是很麻烦。但实际上要在不动其他涉及的逻辑代码，与接口传参取值的情况下还是有点麻烦的。起初想着从百度搜一下看有没有解决方案，发现搜了一圈各个平台上的能搜到的都是相同的内容。无奈之下只好自己研究了。
研究过程
- 经查阅element-ui的table组件并没有提供当表格采用checkbox时对应组件的disabled方法
- 经对dom节点的检查发现element-ui的table组件中checkbox是由两部分组成：
- 我们肉眼可见的是一个span标签
- 还有一个input标签，但是透明度被设置成了0：opacity:0。
- 所以如果我们只通过给input的disabled设置成true显然是不行的。虽然达到了无法选中的目的，但是显示上却与可选中项无表现上的区别。
- 经过上面的研究发现我们需要做两件事：
- input新增属性disabled
- 对应的span标签的样式改成disabeld状态
- 但是如果自己去手写disabled状态样式的话有些麻烦。然后突然注意到如果给span标签新增class属性值：is-disabled的话样式就自己出来了。那接下来就很方便的处理这个问题了。
研究结果
示范代码如下：
执行disabled操作：
document.querySelectorAll('.el-table_body-wrapper .el-checkbox-original')[index].setAttribute('disabled', true)
document.querySelectorAll('.el-table_body-wrapper .el-checkbox_inner')[index].setAttribute('class', 'el-checkbox_inner is-disabled')
document.querySelectorAll('.el-table_body-wrapper .el-checkbox_input')[index].setAttribute('class', 'el-checkbox_inner is-disabled')
执行非disabled操作：
document.querySelectorAll('.el-table_body-wrapper .el-checkbox-original')[index].removeAttribute('disabled')
document.querySelectorAll('.el-table_body-wrapper .el-checkbox_inner')[index].setAttribute('class', 'el-checkbox_inner')
document.querySelectorAll('.el-table_body-wrapper .el-checkbox_input')[index].setAttribute('class', 'el-checkbox_inner')
解释下：上面的querySelectorAll会返回一个数组，数组里便是table组件中的checkbox的dom实例，因为是在循环中进行处理，所以我们可以拿到需要处理的行的下标，也就是[index]。
