element table 復選框單選

前段html代碼

<el-table :data="tableData"
                                  height="350"
                                  border
                                  stripe
                                  @@selection-change="handleSelectionChange"
                                  ref="multipleTable">
                            <el-table-column type="selection"
                                              width="40"
                                             resizable>
                            </el-table-column>
                            
                            <el-table-column 
                                             resizable
                                             prop="CNFiledName"
                                             label="ColumnName"
                                             >
                            </el-table-column>
                        </el-table>

后台js代碼

   handleSelectionChange(val) {
            
            if (val.length == 2) {
                this.$refs.multipleTable.clearSelection(); //清空列表的選中
                this.$refs.multipleTable.toggleRowSelection(val[val.length - 1]); //只顯示選中最后一個 這時val還是多選的列表(就是你選中的幾個數據)
            } else if (val.length === 1) {
                this.templateSelection = val[val.length - 1];
            }
            else if (val.length > 2) {
                this.$refs.multipleTable.clearSelection(); 
                
            }else {
                this.templateSelection = []; //this.multipleTable是選中行的最后一條數據
            }
        
        },