vue el-table 多选框回填

主要代码:

    //选中列,所有列,表名
    toggleSelection(selectRows, totalRows, tablename) {
      this.$refs.table.clearSelection();
      if (selectRows.length > 0) {
        this.$nextTick(() => {
          selectRows.forEach(item => {
            totalRows.forEach(item1 => {
              if (item.userId == item1.userId) {
                this.$refs.table.toggleRowSelection(item1);
              }
            });
          });
        });
      }
    },

效果:

vue el-table 多选框回填_第1张图片

vue el-table 多选框回填_第2张图片

html

    
    
      
        
          
        

        
          
          
          人员选择
        

      
      
    



    
    
      

        
          
            
            
          
        
        
          
        
        
          
            
            
          
        
        
          搜索
          重置
        
      

      
        
        
        
        
      

      

      
    

js

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.projectRow = selection;
      this.ids = selection.map(item => item.userId);
      this.names = selection.map(item => item.nickName);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    
    //打开项目选择弹窗
    selectProject() {
      this.projectOpen = true;
      this.getProjectList();
    },

    /** 查询项目列表 */
    getProjectList() {
      this.loading = true;
      let rows = this.projectRow;
      listUser(this.projectQueryParams).then(response => {
        
        this.projectList = response.rows;
        this.projectTotal = response.total;
        
        let selectRows = this.projectRow;
        let totalRows = response.rows;
        
        this.loading = false;
        this.toggleSelection(selectRows, totalRows);
      });
    },

    //选中列,所有列,表名
    toggleSelection(selectRows, totalRows, tablename) {
      this.$refs.table.clearSelection();
      if (selectRows.length > 0) {
        this.$nextTick(() => {
          selectRows.forEach(item => {
            totalRows.forEach(item1 => {
              if (item.userId == item1.userId) {
                this.$refs.table.toggleRowSelection(item1);
              }
            });
          });
        });
      }
    },

你可能感兴趣的:(vue,vue.js,el-table,多选框回填,多选框回填,vue,多选框回填,table多选回填)