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是选中行的最后一条数据
            }
        
        },

  

 

posted @ 2020-11-20 13:36  看花人墨客  阅读(651)  评论(0编辑  收藏  举报