element中select中使用复选框

最新推荐文章于 2024-07-30 11:12:46 发布

倚楼听风雨淡看江湖路

最新推荐文章于 2024-07-30 11:12:46 发布

阅读量2.8k

点赞数

分类专栏： element 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45289245/article/details/110824587

版权

element 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

element中select框中使用复选框

在这里插入图片描述

script中代码

下面展示一些 内联代码片。

checkBoxfile(val) {
      let listClone = this.isFileList;
      this.isFileList = [];
      if (val.length === 0) {
        listClone.forEach((item) => {
          item.checkedState = false;
        });
      } else {
        val.forEach((item) => {
          listClone.forEach((itm) => {
            if (item === itm.mstCode) {
              itm.checkedState = true;
            } else {
              itm.checkedState = false;
            }
          });
        });
      }

checkBoxfile(val) {
 let listClone = this.isFileList;
 this.isFileList = [];
 if (val.length === 0) {
   listClone.forEach((item) => {
     item.checkedState = false;
   });
 } else {
   val.forEach((item) => {
     listClone.forEach((itm) => {
       if (item === itm.mstCode) {
         itm.checkedState = true;
       } else {
         itm.checkedState = false;
       }
     });
   });
}

tempalte中代码

<el-form-item prop="isFile">
        <el-select
          class="selectStyle"
          :collapse-tags="true"
          multiple
          clearable
          v-model="dataForm.isFile"
          @change="checkBoxfile"
          placeholder="是否上传简历"
        >
          <el-checkbox
            style="
              font-size: 14px;
              padding: 0 20px;
              overflow: hidden;
              color: #606266;
              height: 34px;
              line-height: 34px;
            "
            v-model="checkfile"
            @change="selectFile"
            >全选</el-checkbox
          >
          <el-option
            class="optionCss"
            v-for="(item, index) in isFileList"
            :key="index"
            :label="item.mstVal"
            :value="item.mstCode"
          >
            <el-checkbox
              style="float: left"
              v-model="item.checkedState"
            ></el-checkbox>
            <span
              style="
                float: left;
                margin-left: 4px;
                color: #8492a6;
                font-size: 13px;
              "
              >{{ item.mstVal }}</span
            >
          </el-option>
        </el-select>
        <!-- <el-select v-model="dataForm.isFile" placeholder="是否上传简历">
          <el-option
            v-for="item in isFileList"
            :key="item.mstCode"
            :label="item.mstVal"
            :value="item.mstVal"
          ></el-option>
        </el-select> -->
      </el-form-item>

<el-form-item prop="isFile">
        <el-select
          class="selectStyle"
          :collapse-tags="true"
          multiple
          clearable
          v-model="dataForm.isFile"
          @change="checkBoxfile"
          placeholder="是否上传简历"
        >
          <el-checkbox
            style="
              font-size: 14px;
              padding: 0 20px;
              overflow: hidden;
              color: #606266;
              height: 34px;
              line-height: 34px;
            "
            v-model="checkfile"
            @change="selectFile"
            >全选</el-checkbox
          >
          <el-option
            class="optionCss"
            v-for="(item, index) in isFileList"
            :key="index"
            :label="item.mstVal"
            :value="item.mstCode"
          >
            <el-checkbox
              style="float: left"
              v-model="item.checkedState"
            ></el-checkbox>
            <span
              style="
                float: left;
                margin-left: 4px;
                color: #8492a6;
                font-size: 13px;
              "
              >{{ item.mstVal }}</span
            >
          </el-option>
        </el-select>
        <!-- <el-select v-model="dataForm.isFile" placeholder="是否上传简历">
          <el-option
            v-for="item in isFileList"
            :key="item.mstCode"
            :label="item.mstVal"
            :value="item.mstVal"
          ></el-option>
        </el-select> -->
      </el-form-item>