标签：Checkbox downloadDisplay self 全选 ui saveSelected 下载 选框

需求：下载功能要展示所有的下载字段，用户根据需要使用多选框选中后提交，并完成下载。
这里 我使用了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 = [];
      }
    },

最后的页面效果是这样的

标签：Checkbox,downloadDisplay,self,全选,ui,saveSelected,下载,选框
来源： https://blog.csdn.net/demo_020/article/details/112718217

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。