Element 表格连续选择

139 阅读1分钟

  <el-table
           :data="handDataList"
           border
           @selection-change="handleSelectionChange"
       >
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
           <el-table-column property="date" label="序号" align="center">
           </el-table-column>
       </el-table>

data() {
        return {
        handDataList: [
                { id: 1 ,name:'000'},
                { id: 2 ,name:'000'},
                { id: 3 ,name:'000'},
                { id: 4 ,name:'000'},
                { id: 5 ,name:'000'},
                { id: 6 ,name:'000'},
                { id: 7 ,name:'000'},
                { id: 8 ,name:'000'},
                { id: 9 ,name:'000'},
                { id: 10,name:'000' },
                { id: 11,name:'000' }
            ],
        }
    },
 methods:{
  handleSelectionChange(val) {
            let multipleSelection = val;
            //长度大于2开始判断是否是连续数字
            if (multipleSelection.length >= 2) {
                let arr=[]
                for(let i=0;i<multipleSelection.length;i++){
                    arr.push(multipleSelection[i].id)
                }
                arr.sort((a, b) => {
                    return a - b;
                });//数组从小到大排下序,这样向后选完之后可以向前选
                var result = [];
                var tmp;
                while(tmp = arr.shift()){
                    if(result.length == 0){
                        result.push([tmp]);
                        continue;
                    }
                
                    var e = result[result.length - 1];
                    if(tmp == e[e.length - 1] + 1){
                        e.push(tmp);
                    }else{
                    //result 得到连续数字 和 不连续数字的二维数组
                        result.push([tmp]);
                    }
                }
                let checkId;
                for(let i=0;i<result.length;i++){
                    for(let j=0;j<result[i].length;j++){
                        if(result[i].length<=1){
                            checkId=result[i]
                        }
                    }
                }
                if(checkId>=1){
                //得到不连续的数字 取消选择
                    for(let i=0;i<multipleSelection.length;i++){
                        if(multipleSelection[i].id==checkId.toString()){
                            this.$message.warning('请选择连续的行')
                            this.$refs.multipleTable.toggleRowSelection(multipleSelection[i])
                        }
                    }
                }
                
            }
        },
    }