element-ui之Checkbox 多选框

最新推荐文章于 2025-06-18 11:30:09 发布

原创最新推荐文章于 2025-06-18 11:30:09 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #ajax

笔记专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何利用Element-UI的Checkbox组件实现下载功能。首先在Vue项目中引入Checkbox，然后从后台获取下载字段，用户可以根据需求选择多选框后提交下载。此外，还添加了全选功能，通过v-model绑定数组并比较长度来实现全选操作。

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