elementui之table多选的checkbox--记住勾选状态&&默认勾选且不可取消

水深无声 2022-12-11 09:09 838阅读 0赞

首先是表格记住勾选状态  
之前用的公司的组件，然后手动写方法用`this.$set`进行状态的勾选  
但比较麻烦，开了很多数组与对象

watch: {
        
    	tableData(n, o) {
        
    		...
    		this.$nextTick(() => {
        
    			n.forEach( row => {
        
    				if(row.id == currentId && checkTmpArr[item.id]) {
        
    					this.$set(row, '_isChecked', true);
    				} else {
        
    					this.$set(row, '_isChecked', false);
    				}
    			})
    			return n
    		})
        }
    }

然鹅…  
后来无意间发现了el-table这个属性…  
![在这里插入图片描述][20200929170857673.png_pic_center]  
就果断放弃了之前麻烦的方法，换成了`el-table`  
就可以很方便的在切换页码之后，再返回，仍可记住勾选状态

后来的需求是列表中某个用户需要默认被勾选上，于是加了`@select`方法和其他一系列操作进行实现

<el-table
       class="addMemberTable"
       :data="tableData"
       :row-key="getRowKey" //reserve-selection必须要有这个属性
       @selection-change="selectChange"
       @select="selectSingle"//可完成默认选中并且不可取消
       ref="multiTable">
       <el-table-column type="selection" :reserve-selection="true"></el-table-column>
       <el-table-column prop="username" label="用户名">
         ...
       </el-table-column>
     </el-table>
    
    methods: {
        
        getRowKey(row){
        
          return row.id;
        },
        selectChange(row){
        
          this.selectedRows = row;
        },
        selectSingle(selection,row){
        
          if(row.id == this.currentUser.id){
        
             this.selectionChange()
          }
        },
        // 该方法要在获取到后台数据之后就调用，可能在mounted里，也可以在.then中
        selectionChange() {
        
          this.$nextTick(() => {
        
            let table = this.tableData; // 从后台获取到的数据
            table.forEach(row => {
        
              if (row.id == this.currentUser.id)
                this.$refs.multiTable.toggleRowSelection(row, true);
            });
          });
        },
    }

[20200929170857673.png_pic_center]: /images/20221123/9504cec28e2e4ab18527f25c26382eed.png