elementUI组件使用过程中问题总结

走马灯组件 Carousel 上的点击事件，需要通过 @click.native实现

<el-carousel-item v-for="item in bannerActivityList" :key="item.id" @click.native="viewDetail(item)">
     <img class="medium" :src="item.imgUrl" />
 </el-carousel-item>

上传图片后校验未取消问题

// 取消单个校验
this.$refs.ruleForm.validateField('checkPass')
// 重置全部取消校验
this.$refs.ruleForm.resetFields();
// 取消上传文件
this.$refs.ruleForm.clearFiles()
// 文件上传校验，通常会出现校验失效问题，直接通过校验值是否存在
    const validatePassCoverUrl = (rule, value, callback) => {
      if (!this.ruleForm.coverUrl2) { // 上传成功后，赋值对象
        callback(new Error('请上传文件'))
      } else {
        callback()
      }
    }
coverUrl2: [
          {
            required: true,
            validator: validatePassCoverUrl,
            trigger: 'change'
          }
        ]

el-upload 文件上传格式前端校验

 beforeFileUpload(file) {
      const allowFileTypes = ['rar', 'zip', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
      const fileName = (file.name).split('.')
      let fileType = fileName[fileName.length - 1]
      const isFile = allowFileTypes.includes(fileType.toLowerCase())
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isFile) {
        this.$message.error('上传文件只能是 rar、zip、doc、docx、xls、xlsx、pdf 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!')
      }
      return isFile&&isLt2M
    },

选择器多选时选择项超出选择框？？？？

// .select-box 为外层手动添加的 父级类，样式不能写在 scoped 中，需要独立出来
<style>
.select-box .el-select__tags-text{
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select-box .el-select .el-tag__close.el-icon-close {
  top: -7px;
}
</style>

上传组件中，支持上传多张图片时上传中一直闪动？？？？

// 1.首先看下产生原因是否是因为样式引起
/deep/.el-upload-list__item.is-ready {
  display: none;
}
// 2.如果不是的话，可能在成功回调的时候要考虑，不要直接push
docSuccess(response, file, fileList) {
      if (response.code == '0000') {
        /* this.fileListImg.push({
          id: response.data.id,
          name: response.data.fileName,
          url: response.data.uploadUrl
        }) */
        this.fileListImg = fileList // 为什么直接赋值？解决上传来回抖动问题
      }
    },

elementui 中上传图片判断格式&和&&的区别

相同点：只要有一端为假，则语句不成立
不同点：& 的左右两个表达式都会成立，&& 中如果左边不成立，不会继续执行右边

element 中 el-table 下设置多选

直接判断此时是否别表中都是禁用，如果是的话，使用 clearSelection()
@select-all="selectAll"
// 当列表中都不能删除时，这时全选禁止点击
    selectAll() {
      let isAllDisabled = false
      this.tableData.map((item) => {
        if (item.id) {
          isAllDisabled = true
        }
      })
      if (!isAllDisabled) {
        this.$refs.multipleTable.clearSelection()
      }
    },

Popover 弹出框

控制消失、显示
this.$refs[`popover-${row.id}`].showPopper = false

el-input输入框

<el-input
     @input="(e) => (amount = isNumber(e))"
     v-model="amount"
     class="modify_input"
     placeholder="请输入正整数"
></el-input>
isNumber(val) {
      val = val.replace(/[^0-9]/gi, '')
      return val
    }

el-table 中给表头添加自定义图标（使用插槽 slot=“header”）

<el-table-column prop="viewNumber" label="" align="center">
      <span slot="header">是否同步省平台</span>
 </el-table-column>

树形控件

<el-tree
            ref="fundFilesTree"
            :data="treeListAll"
            :props="defaultProps"
            :default-expanded-keys="defaultActive"
            @node-click="handleNodeClick"
            :draggable="isdraggable"
            @node-drop="handleDragEnd"
            :allow-drop="allowDrop"
            highlight-current
            node-key="id"
            empty-text="暂无文件夹"
          >
    <span class="custom-tree-node" slot-scope="{ node, data }">
              <div :title="node.label" class="overflowHidden">
                {{ node.label }}
              </div>
              <el-popover
                placement="bottom"
                width="150"
                trigger="hover"
                class="tree-popover"
                style="padding: 0"
              >
                <div
                  class="btn-cl"
                  style="display: flex; flex-direction: column"
                >
                  <el-button
                    class="tree-box-item"
                    @click.stop="showNodeDialog(data, 'addSub')"
                    style="border: none; text-align: left"
                  >
                    添加子文件夹</el-button
                  >
                  <el-button
                    class="tree-box-item"
                    @click.stop="showNodeDialog(data, 'edit')"
                    style="
                      border: none;
                      text-align: left;
                      margin-left: 0px !important;
                    "
                  >
                    编辑</el-button
                  >
                  <el-button
                    @click.stop="deleteFiles(data)"
                    class="tree-box-item"
                    style="
                      border: none;
                      text-align: left;
                      margin-left: 0px !important;
                    "
                  >
                    删除</el-button
                  >
                </div>
                <el-button
                  class="ellipsis-btn btn-roleManage"
                  slot="reference"
                  style="padding: 0 15px 15px"
                  >...</el-button
                >
              </el-popover>
            </span>
</el-tree>
// 是否可以拖拽
    allowDrop(draggingNode, dropNode, type) {
      if (draggingNode.data.level === dropNode.data.level) { // 同级才能拖拽
        // parentId父级节点
        if (draggingNode.data.parentId === dropNode.data.parentId) {
          return type === 'prev' || type === 'next' // type = inner是插入下级节点
        }
      } else {
        // 不同级进行处理
        return false
      }
    },
     // 拖拽成功事件
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      const obj = {
        parentId: '',
        ids: []
      }
      if (dropType === 'inner') {
        // 插入至目标节点单独处理，不能和 pre 和 next 一样处理数据，传值会有问题
        obj.parentId = dropNode.data.id
        for (const item of dropNode.data.childrenList) {
          obj.ids.push(item.id)
        }
      } else {
        obj.parentId = dropNode.data.parentId
        for (const item of dropNode.parent.childNodes) {
          obj.ids.push(item.data.id)
        }
      }
      const ids = obj.ids.length > 0 ? obj.ids.join(',') : ''
      const con = { ...obj, ids }
      debugger
      console.log(dropNode, con)
      return
      // 菜单排序
      this.$api['system-settings/permission-setting/sortMenu']({
        data: con
      }).then((response) => {
        // const res = response.data;
        if (response.code === '0000') {
          this.reload()
          this.$message({
            message: '排序成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })
    },

el-date-picker 时间选择器禁用时间

<el-date-picker
    type="date"
    placeholder="选择日期"
    v-model="form.signingDate"
    :picker-options="pickerOptions"
    style="width: 100%"
></el-date-picker>
// 关键代码            
pickerOptions: {
                disabledDate(data) {
                    return data.getTime() > new Date()
                }
            }          

el-table相关问题

// 发生错位的原因，是由于table在数据请求后，渲染异常的问题；因此，解决办法就是让table重新布局。
this.$nextTick(() => {
     this.$refs.scrollTable.doLayout()
})

// 表格空状态自定义
            <template slot="empty">
              <div>
                <img src="@/assets/table-empty.png" alt="" />
                <p>暂无数据</p>
              </div>
            </template>

// 当列表涉及单选时，表头多选按钮去掉，直接重新写复选框 
html               
<el-table-column width="55">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checked"
                @change="changeCurrentRow($event, scope.$index, scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
          
js                                                  
初始化数据列表时，默认不选中，需要对数据进行处理
res.list.forEach(item => {
    Object.assign(item, { checked: false })
})
this.managerList = res.list
          
// 改选行
changeCurrentRow(val, rowIndex, row) {
            const data = this.managerList
            // 遍历表格的数据，将非本行的所有数据的checked属性置为false，即取消选择
            for (let index in data) {
                if (index == rowIndex) {
                    data[index].checked = val
                } else {
                    data[index].checked = false
                }
            }
            this.managerList = data
            this.selectManagerId = row.checked ? row.id : '' // 保存我们的行数据，这样用户点击不同的行都能保证我们直接获取到对应的数据
},

基于 el-element 图片放大

// html
    <el-image-viewer
      v-if="showViewer"
      :url-list="urlList"
      :on-close="onClose"
    />
// js
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
components: {
    ElImageViewer
  },  
  data() {
    return {
      urlList: [],
      showViewer: false,
    };
  },