element-ui Memo

级联选择器懒加载

data() {
const that = this 
 return {
   props: {
        label: 'name',
        value: 'phid',
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          if (node.level === 0) {
            setTimeout(() => {
              const str = 'ucenter/orgNew/findFirstOrg/' + that.userId  
              that.$http.get(str, { uuId: new Date().getTime() })
                .then(res => {
                  if (res.status) {
                    res.data.map(item => {
                      return {
                        ...item,
                        leaf: item.levels >= 2
                      }
                    })
                    resolve(res.data)
                  } else {
                    self.$message.error(res.message)
                  }
                })
                .catch(err => {
                  console.log(err)
                  self.$message.error(err.message)
                })
            }, 0)
          } else {
            setTimeout(() => {
              const params = {
                phid: node.data.phid,
                uuId: new Date().getTime()
              }
              that.$http.get('ucenter/orgNew/findSonByPhId', params)
                .then(response => {
                  if (response.status) {
                    response.data.map(item => {
                      return {
                        ...item,
                        leaf: item.levels >= 2
                      }
                    })
                    resolve(response.data)
                  } else {
                    self.$message.error(response.message)
                  }
                })
            }, 0)
          }
        }
      }
 }
}

tab栏

<div v-for="(item, index) in tablist" :key="index">
            <div :class="{ formTypeSelect: item.isSelect }" @click="tab(index)">
              {{ item.name }}
            </div>
          </div>

tablist: [
        { name: '1', isSelect: true },
        // { name: '2', isSelect: false },
        { name: '附件', isSelect: false }
      ],

// tab切换
    tab(index) {
      this.tablist.forEach((item, index) => {
        item.isSelect = false
      })
      this.tablist[index].isSelect = true
    },

el-date-picker 日期禁用

<el-date-picker v-model="value1" type="date" placeholder="选择日期" 
  :picker-options="pickerOptions">
</el-date-picker>
data (){
   return {
       pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e6 //如-8.64e7就是不可以选择今天的
          }
        },  
   }    
}

elementui 合计行合并单元格

watch: {
tableData: {
      immediate: true,
      async handler() {
        await this.$nextTick() // 根据实际选择延迟调用
        const tds = document.querySelectorAll('.el-table__footer-wrapper tr>td')
        tds[0].colSpan = 2
        tds[0].style.textAlign = 'center'
        tds[1].style.display = 'none'
        tds[2].style.textAlign = 'center'
        tds[3].style.textAlign = 'center'
        console.log(tds, 'tds')
      }
    }
}

利用spanMethods合并重名列
(1)将重复的列index存为数组

getOrderNumber() {
      this.OrderIndexArr = []
      const OrderObj = {}
      this.tableData.forEach((element, index) => {
        if (OrderObj[element.planType]) {
          OrderObj[element.planType].push(index)
        } else {
          OrderObj[element.planType] = []
          OrderObj[element.planType].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）planIndexArr
      for (const k in OrderObj) {
        if (OrderObj[k].length > 0) {
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
      console.log(OrderObj, 'OrderObj')
      console.log(this.OrderIndexArr, 'OrderIndexArr')
    }

(2)对要合并的行通过重复的数组长度合并

if (columnIndex === 2) {  // spanMethods
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          const element = this.OrderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            const item = element[j]
            // console.log(rowIndex, item)
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }

方法二：

// 合并
// spanArr: []
// pos: 0
    getSpanArr(data) { // 传入表数据
      this.spanArr = []
      for (let i = 0; i < data.length; i++) {
        if (i === 0) { // 第一个
          this.spanArr.push(1)
          this.pos = 0
        } else if (data[i].name === data[i - 1].name) { // 比较（更改为要合并列的字段）
          this.spanArr[this.pos] += 1
          this.spanArr.push(0)
        } else { // 无合并项
          this.spanArr.push(1)
          this.pos = i // 记录位置
        }
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }

隐藏的图片查看器el-image-viewer

方法一

<template>
    <div>
        <el-button @click="onPreview">预览</el-button>
        <el-image-viewer  v-if="showViewer" :on-close="closeViewer" :url-list="[url]" />
    </div>
</template>
<script>
    // 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    
    export default {
      name: 'Index',
      components: { ElImageViewer },
      data() {
        return {
          showViewer: false, // 显示查看器
          url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      },
      methods: {
        onPreview() {
          this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false
        }
      }
</script>

方法二

<template>
    <div>
        <el-button @click="onPreview">预览</el-button>
        <!-- 图片查看器(兼容ie) -->
        <el-image
          ref="preview"
          class="hideImgDiv"
          :src="url"
          :preview-src-list="[url]"
          z-index="9999"
        ></el-image>
    </div>
</template>
<script>
    export default {
      name: 'Index',
      data() {
        return {
          url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
        }
      },
      methods: {
        onPreview() {
          //调用image组件中的大图浏览图片方法
          this.$refs.preview.clickHandler();
          //  this.$refs.myImg.showViewer = true // 也可使用 showViewer 属性
        },
      }
</script>

css

/*隐藏el-image图片组件中不需要展示的的img标签*/
.hideImgDiv {
  /deep/ .el-image__inner {
    display: none;
  }
}

el-table 长列表分段加载

  directives: {
    loadmore: {
      bind(el, binding) {
        const selectWrap = el.querySelector('.el-table__body-wrapper')
        selectWrap.addEventListener('scroll', function() {
          const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
          // 判断是否到底,scrollTop为已滚动到元素上边界的像素数，scrollHeight为元素完整的高度，clientHeight为内容的可见宽度
          if (scrollDistance <= 10) {
            binding.value()
          }
        })
      }
    }
  },


  methods: {
    loadmore() { // v-loadmore="loadmore"
      this.loadNum++
      console.log('loadMore', this.loadNum)
      this.tableData = [...this.tableData, ...this.listEach(this.loadNum)]
    },
    listEach(Num) {
      const NumStart = ((Num - 1) * 5) + 6
      const NumEnd = (Num * 5) + 6
      const TableDataEach = this.listArray.slice(NumStart, NumEnd)
      return TableDataEach
    }
}

/*
请求到数据后先存一份，tableData先展示部分
this.listArray = data.records || []
            this.loadNum = 0
            this.tableData = this.listArray.slice(0, 6)
*/