【学习笔记】elementui选择器自定义全选

  • 内容
  • 相关

vue.jpg

前言

最近写项目,前端使用的框架是elementui,有需求是下拉框需要一键全选,但是我翻遍了文档也没有看到有这么一个功能,所以只等自定义一个了。

code

下拉框添加change事件,在选项上面添加一个checkbox开关,代码如下

<el-form-item label="参会人员" prop="participants">
        <el-select
          v-model="dataForm.participants"
          multiple
          filterable
          @change="changeSelect"
          style="width: 100%"
        >
          <el-checkbox v-model="checked" @change="selectAll">全选</el-checkbox>
          <el-option
            v-for="item in participantsList"
            :key="item.userId"
            :label="item.username"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>

变量中添加chcked

checked: false, //是否全选

方法中添加:(根据自己需求更改)

selectAll() {
      this.participants = [];
      if (this.checked) {
        this.dataForm.participants = [];
        this.participantsList.map((item) => {
          this.dataForm.participants.push(item.userId);
        });
      } else {
        this.dataForm.participants = [];
      }
      console.log(this.dataForm.participants);
    },
    changeSelect(val) {
      if (val.length === this.participantsList.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },

最后附上样式

.el-checkbox {
  text-align: right;
  width: 100%;
  padding-right: 10px;
}

 

您阅读这篇文章共花了: 

本文标签:

版权声明:若无特殊注明,本文皆为《囚墨吖丶》原创,转载请保留文章出处。

本文链接:【学习笔记】elementui选择器自定义全选 - http://dmlove.club/33.html

文章收录:[百度已收录] | [360已收录] | [搜狗已收录]