zoukankan      html  css  js  c++  java
  • 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是选中行的最后一条数据
                }
            
            },
    

      

  • 相关阅读:
    1070 结绳
    1069 微博转发抽奖
    1068 万绿丛中一点红
    1067 试密码
    1066 图像过滤
    1065 单身狗
    CSS--文本溢出与换行
    css--滤镜filter
    css--flex布局
    css--table布局
  • 原文地址:https://www.cnblogs.com/myleave/p/14010406.html
Copyright © 2011-2022 走看看