element-ui一些好用的方法

1、el-tree单选，用check事件

    checkDepartment (data, node) {
      let keys = node.checkedKeys
      let nodes = this.$refs.departmentTree.store._getAllNodes()
      for (let i = 0; i < nodes.length; i++) {
        if (keys.includes(nodes[i].key) && data.id === nodes[i].key) {
          nodes[i].checked = true
        } else {
          nodes[i].checked = false
        }
      }
    }

2、树节点全部展开/收缩

let nodes = this.$refs.tree.store._getAllNodes()
for (let i = 0; i < nodes.length; i++) {
  nodes[i].expanded = !!num
}

3、el-select外框根据内容自适应宽度

el-select(v-model="projectId" size="small" placeholder="请选择" @change="projectCommand" style="width: auto;")
            template(slot="prefix")
              span.prefix {{dropName}}
            el-option(v-for="item in projectList" :key="item.value" :label="item.text" :value="item.value")

::v-deep .el-select{
          .el-input__inner{ // input使用绝对定位消除文档宽度
            position: absolute;
            width: 100%;
            padding: 0 15px;
            background: none;
            border: 1px solid #208EFF;
            border-radius: 4px;
            color: #fff; font-weight: bold;
          }
          .el-input__prefix{ // 改为使用prefix的内容撑开选框
            position: relative; left: 0;
            display: block; height: 32px;
            visibility: hidden; pointer-events: none;
            white-space: nowrap;
            padding: 0 15px;
            font-size: 14px;
          }
        }

projectCommand(){
  let obj = this.projects.find(item=>item.id === val)
  if(obj){
    this.dropName = obj.project
  }
}

4、动态合并单元格（单列）

    getSpanArr(data) {　
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同
            if (data[i].id === data[i - 1].id) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
            console.log(this.spanArr)
        }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            console.log(`rowspan:${_row} colspan:${_col}`)
            return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
                  rowspan: _row,
                  colspan: _col
            }
          }
        }
       }

5、动态合并单元格（多列）

getSpanArr(data) {
      this.spanArr = {}
      for (var i = 0; i < data.length; i++) {
        let row = data[i]
        let keys = Object.keys(row)
        if (i === 0) {
          keys.forEach((item, index) => {
            if (!this.spanArr[item]) {
              this.spanArr[item] = {}
              this.spanArr[item].number = []
              this.spanArr[item].pos = 0
            }
            this.spanArr[item].number.push(1)
          })
        } else {
          keys.forEach((item, index) => {
            if (data[i][item] === data[i - 1][item]) {
              this.spanArr[item].number[this.spanArr[item].pos] += 1
              this.spanArr[item].number.push(0)
            } else {
              this.spanArr[item].number.push(1);
              this.spanArr[item].pos = i;
            }
          })
        }
      }
      console.log('spanArr', this.spanArr) // 最终格式如下图
    },

objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 1 || columnIndex === 2 || columnIndex === 8) {
        const _row = this.spanArr[column.property].number[rowIndex]; // column.property为列的prop
        const _col = _row > 0 ? 1 : 0;
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },

6、el-table表格回到顶部/底部 

this.$nextTick(() => {
  let container = this.$el.querySelector('.el-table__body-wrapper')
  // 精确点可以用ref的$el，container.scrollHeight到底部
  container.scrollTop = 0
})

7、el-upload，before-upload验证文件格式

export function beforeUpload(file, accept, size) {
  let nameArr = file.name.split('.')
  let name = nameArr[nameArr.length - 1].toLowerCase()
  let accepts = accept.split(',').map(it => it.substr(1).toLowerCase())
  if (!accepts.includes(name)) {
    this.$message.warning('请选择' + accept + '格式的文件！')
    return false
  }
  if (typeof size == 'number' && size > 0) {
    console.log('file', file)
    let isMax = file.size / 1024 / 1024 > size
    if (isMax) {
      this.$message.error(`文件大小不能超过 ${size}MB`)
      return false
    }
  }
  return true
}

8、el-date-picker类型为range时监听年月面板切换

let ref = this.$refs.gradientRef
// 定义值用来销毁后面的监听
let unWatch = null
ref.$watch('pickerVisible', (newValue) => {
  if (newValue) {
    // 必须监听面板显示之后再获取picker，不然未初始化完成，值是undefined
    const picker = ref.picker
    if (picker) {
      // leftDate是源码data中的
      unWatch = picker.$watch('leftDate', (val) => {
        let leftMonth = picker.leftMonth // 月的值是比实际值小1的，使用是注意
        let leftYear = picker.leftYear
      })
    } else {
      // 销毁
      unWatch && unWatch() 
    }
  } else {
    unWatch && unWatch()
  }
})

9、主动隐藏级联面板

this.$refs.codeRef.toggleDropDownVisible(false)

10、el-select外框根据内容自适应宽度

// html
el-select(v-model="projectId" size="small" placeholder="请选择" @change="projectCommand" style="width: auto;")
  template(slot="prefix")
    span.prefix {{dropName}}
  el-option(v-for="item in projectList" :key="item.value" :label="item.text" :value="item.value")
// css
::v-deep .el-select{
  .el-input__inner{ // input使用绝对定位消除文档宽度
     position: absolute;
     width: 100%;
     padding: 0 15px;
     background: none;
     border: 1px solid #208EFF;
     border-radius: 4px;
     color: #fff; font-weight: bold;
  }
  .el-input__prefix{ // 改为使用prefix的内容撑开选框
     position: relative; left: 0;
     display: block; height: 32px;
     visibility: hidden; pointer-events: none;
     white-space: nowrap;
     padding: 0 15px;
     font-size: 14px;
  }
}
// script
projectCommand(){
  let obj = this.projects.find(item=>item.id === val)
  if(obj){
    this.dropName = obj.project
  }
}