element-ui之Checkbox 多选框

需求：下载功能要展示所有的下载字段，用户根据需要使用多选框选中后提交，并完成下载。
这里 我使用了element-ui的Checkbox 多选框

1.引用Checkbox 多选框

<el-checkbox-group sortable="cistom">
          <el-checkbox
          v-for="tag in downloadDisplay" //遍历展示下载字段
          :label="tag.id" :key="tag.id" 
          :title="tag.tagName" 
          v-model="saveSelected"
          >
          {
     {
     tag.tagName}}
          </el-checkbox>
        </el-checkbox-group>

data()中添加组件状态和存放组件的数组：

 	  downloadDisplay:[],//下载展示内容存放
      saveSelected:[],//存放已选内容
      checkAll:false,//选框状态
      checkboxDialogVisible: false,//下载框对话框状态
      isIndeterminate: true,//下载全选

2.从后台获取下载字段

getdownloadDisplay(){
     
      let _self = this
      _self.axios.get(process.env.VUE_APP_ANA_URL+"这是后台接口")
      .then(response=>{
     
        if (response.data.returnCode == "111111") {
     
          _self.downloadDisplay=response.data.data;//数据保存到downloadDisplay数组
        }
      }).catch(error=>{
     
        console.log(error.respons);
      })
      // console.log(JSON.stringify(_self.downloadDisplay));
    },

3.选中后提交下载

handleDownloadSubmit(){
     
      let _self = this;
      if(_self.saveSelected.length == 0){
     
        _self.$message.error("请选择需要下载的字段")
      }else{
     
        _self.checkboxDialogVisible=false;//点击确认后关闭对话框
        this.axios({
     
          url:process.env.VUE_APP_ANA_URL+"提交的后台接口"+
        _self.downloadTaskId+
        "&tagIds="+
        _self.saveSelected.join(","),
        method:"get",
        responseType: "blob",//这个很重要，如果没有下载的文件无法打开
        })
        .then((response) => {
     //下载器
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download","客户清单" + ".xlsx");
        document.body.appendChild(link);
        link.click();
        _self.$message({
     
          message:'正在下载，请在下载完成后查看',
          type:'success'
        })
        _self.saveSelected = [];
        _self.downloadTaskId = [];
      });
      }
    },

4.全选功能

下载功能的新的需求：提供一个全选按钮。这里使用v-model绑定saveSelected数组。

<div class="container">
      <el-checkbox 
      :indeterminate="isIndeterminate"
      @change="getCheckAll()"
      >全选
      </el-checkbox>
      <div style="margin:15px 0;"></div>
        <el-checkbox-group v-model="saveSelected" sortable="cistom">

下面是全选的方法：
通过对比两个数组的长度，来进行全选操作

getCheckAll(){
     
      if (this.downloadDisplay.length != this.saveSelected.length) {
     
        let lag = this.downloadDisplay.map(item=>item.id);
        this.saveSelected = lag;
      }else{
     
      this.saveSelected = [];
      }
    },

最后的页面效果是这样的