Element

Cascader 选择任意一级选项 点options选项 自动关闭弹窗

1. 绑定事件

<el-cascader
   @visible-change="handleChange"
   @expand-change="handleChange"
   ref="elcascader"
   @change="handleToggle"
</>

2. 操作

//版本一
     //async handleChange() {
      // let that = this;
      // await this.$nextTick();
      // document
      //     .querySelectorAll(".el-cascader-panel .el-radio__input")
      //     .forEach((el) => {
      //       el.addEventListener('click', (el) => {
      //         console.log(el);
      //         // 选中radio后，关闭下拉框
      //         that.$refs.elcascader.togglePopperVisible(false);
      //       })
      //     });
    //}
//版本二 为什么使用版本一？？百度上看的？？忘记了
//vue3
    handleToggle() {
      this.$refs.elcascader.togglePopperVisible(false);
    },
//vue2 
    handleToggle() {
      this.$refs.categoryRef.toggleDropDownVisible(false)
    },

获取选项框的Label：

   this.$refs['diyuCascader'].getCheckedNodes()[0].pathLabels;

Table表格的复选框选择多页保留id：

1. 绑定事件

<el-table @selection-change="handleSelectionChange" ref="multipleTableRef">

2. 保存每页选择的id

handleSelectionChange(row) {
      if (!row || !row.length > 0) return;
      const ids = this.data.map(r => r.id);
      this.tabSelectedData = this.tabSelectedData.filter(t => !ids.includes(t.id));
      this.tabSelectedData =[...this.tabSelectedData, ...row];
      this.tabSelectedIds = this.tabSelectedData.map(r => r.id);
    },

3. 回显选中的id
   this.data 是页数改变时后台返回的数据

 getSelectedRows() {
      const includes = this.data.filter(d => this.tabSelectedIds.includes(d.id));
      if (includes) {
        this.$nextTick(() => {
          includes.forEach(r => {
            this.$refs.multipleTableRef.toggleRowSelection(r, undefined);
          })
        });
      }
    },

el-upload组件picture-card类型上传一张照片后，上传框消失

<el-upload
     :class="disabled ? 'upload' : ''"
     :action="action"
     list-type="picture-card"
     :file-list="form.fileList" //编辑表单反显照片
     :on-remove="handleRemove"
     :on-success="handleSuccess">
       <el-icon><Plus /></el-icon>
</el-upload>
watch: {
    fileList() {
      if (this.fileList.length > 0) {
        this.disabled = true //表单编辑反显时，有图片不要上传框，监听fileList 或者 从接口中获取
      }
    }
},
handleRemove(uploadFile) {
  this.disabled = false
},
handleSuccess(res) {
   this.disabled = true
},
.upload >>> .el-upload--picture-card {
  display: none;
}

el-upload组件avatar-uploader类型hover遮罩

hover:

<div class="upload">
          <el-upload
            class="avatar-uploader"
            :on-success="handleAvatarSuccess">
            <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <!-- 阻止冒泡 嘻嘻 -->
            <span class="el-upload-list__item-actions"
              @click.stop
              v-if="ruleForm.imageUrl">
              <span 
                class="el-upload-list__item-preview icon"
                @click="handlePreview">
                <i class="el-icon-zoom-in preview-icon"></i>
              </span>
              <span
                class="el-upload-list__item-preview"
                @click="handleRemove"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </el-upload>
        </div>
        <el-dialog :visible.sync="dialogVisible"      append-to-body>
          <img width="100%" :src="ruleForm.imageUrl" alt="上传的图片">
        </el-dialog>

handleAvatarSuccess(res, file) {
      this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
    },
handlePreview() {
      this.dialogVisible = true;
      console.log('preview');
    },

.el-upload-list__item-actions {
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 20px;
  background-color:rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.3s
}
.el-upload-list__item-actions:hover {
  opacity: 1;
}
//垂直居中 很有意思呀
.el-upload-list__item-actions:after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
.avatar-uploader /deep/ .el-upload {
  position: relative;
}

日期选择框，value绑定默认为YYYY-MM-DD HH:mm:ss

 <el-date-picker
            v-model="form.updateDate"
            type="daterange"
            range-separator="一"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            :default-time="defaultTime"
            clearable
        />

el-switch 左边/右边添加上/下

.shelves {
          .el-switch {
            /deep/ .el-switch__core:before {
              display: inline-block;
              content: '下';
              width: 100%;
              text-align: right;
              padding-right: 4px;
              color: #FFFFFF;
            }
          }
          .is-checked {
            /deep/ .el-switch__core:before {
              display: inline-block;
              content: '上';
              width: 100%;
              text-align: left;
              padding-left: 4px;
              color: #FFFFFF;
            }
          }
        }