Element UI version
2.13.2
OS/Browsers version
macos
Vue version
3.0.2
Reproduction Link
https://jsfiddle.net/mmx38qxw/
Steps to reproduce
对 table 进行一步分装 CustomTable 组件
然后通过 this.$refs.table.toggleRowSelection() 调用
结果不生效
关键代码在这里
element/packages/table/src/util.js
Lines 198 to 203 in 90c5d74
| | exportfunctiontoggleRowStatus(statusArr,row,newVal){ |
| | letchanged=false; |
| | constindex=statusArr.indexOf(row); |
| | constincluded=index!==-1; |
| | |
| | constaddRow=()=>{ |
在做对比的时候使用了 const index = statusArr.indexOf(row);
因为封装的 table 的数据是来自 prop，对象的引用改变了。
所以 statusArr.indexOf(row); 永远找不到对象
所以 toggleRowSelection 不会生效
What is Expected?
xxx
What is actually happening?
xxx
4条答案
按热度按时间zvms9eto1#
我有同样的需求。我有两个表格，表格1是比较简略的数据，选中表格1的多个数据会根据id去后台查更加详细的数据并且显示到表格2，同时表格2每条数据有一个清除按钮，点击清除按钮调用表格1的toggleRowSelection来清除选中
edqdpe6u2#
我有同样的需求。我有两个表格，表格1是比较简略的数据，选中表格1的多个数据会根据id去后台查更加详细的数据并且显示到表格2，同时表格2每条数据有一个清除按钮，点击清除按钮调用表格1的toggleRowSelection来清除选中
既然使用复选需要row-key，为什么在toggleRowSelection的时候不直接使用row-key而是使用row呢？
jucafojl3#
我有同样的需求。我有两个表格，表格1是比较简略的数据，选中表格1的多个数据会根据id去后台查更加详细的数据并且显示到表格2，同时表格2每条数据有一个清除按钮，点击清除按钮调用表格1的toggleRowSelection来清除选中
既然使用复选需要row-key，为什么在toggleRowSelection的时候不直接使用row-key而是使用row呢？
我看源代码有个 updateSelectionByRowKey 函数，这个看起来就是通过rowkey来比较的
element/packages/table/src/store/watcher.js
Line 199 in 55bac06
| | updateSelectionByRowKey(){ |
前提是有reserve selection的列。而触发这个函数的其中一个条件就是设置data
element/packages/table/src/store/index.js
Lines 15 to 25 in 55bac06
| | if(states.reserveSelection){ |
| | this.assertRowKey(); |
| | this.updateSelectionByRowKey(); |
| | }else{ |
| | if(dataInstanceChanged){ |
| | this.clearSelection(); |
| | }else{ |
| | this.cleanSelection(); |
| | } |
| | } |
| | this.updateAllSelected(); |
所以我们可以先 toggleRowSelection 然后再set data，这样的话就能勾选上了。亲测有效。
cwxwcias4#
我有同样的需求。我有两个表格，表格1是比较简略的数据，选中表格1的多个数据会根据id去后台查更加详细的数据并且显示到表格2，同时表格2每条数据有一个清除按钮，点击清除按钮调用表格1的toggleRowSelection来清除选中
既然使用复选需要row-key，为什么在toggleRowSelection的时候不直接使用row-key而是使用row呢？
我看源代码有个 updateSelectionByRowKey 函数，这个看起来就是通过rowkey来比较的
element/packages/table/src/store/watcher.js
Line 199 in 55bac06
| | updateSelectionByRowKey(){ |
前提是有reserve selection的列。而触发这个函数的其中一个条件就是设置data
element/packages/table/src/store/index.js
Lines 15 to 25 in 55bac06
| | if(states.reserveSelection){ |
| | this.assertRowKey(); |
| | this.updateSelectionByRowKey(); |
| | }else{ |
| | if(dataInstanceChanged){ |
| | this.clearSelection(); |
| | }else{ |
| | this.cleanSelection(); |
| | } |
| | } |
| | this.updateAllSelected(); |
所以我们可以先 toggleRowSelection 然后再set data，这样的话就能勾选上了。亲测有效。
所以你这里给tableData解构，再赋值，触发了data的watcher，才进入的这个setData方法，从而引起updateSelectionByRowKey的调用。可是，还是不知道为啥既然有这个方法，toggleRowSelection里面的比对不直接用updateSelectionByRowKey