滑动到底部触发指令

在 main.js 中添加

1
2
3
4
5
6
7
8
9
10
11
12
// 自定义滑动到底部指令
Vue.directive('selectLoadMore', {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) {
        binding.value()
      }
    })
  },
})

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-select
  class="width-max"
  v-model="formValues.hpNumberArr"
  clearable
  filterable
  multiple
  reserve-keyword
  remote
  v-selectLoadMore="selectLoadMore"
  :remote-method="remoteMethod"
  placeholder="请选择表型匹配"
>
  <el-option
    v-for="user in phenotypeList"
    :key="user.id"
    :label="user.label"
    :value="user.value"
  >
  </el-option>
</el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 下拉加载更多
selectLoadMore() {
  this.phenotypeSearch.pageNum = this.phenotypeSearch.pageNum + 1
  if (this.phenotypeList.length >= this.phenotypeSearch.totalPage) return
  this.readAllUsers() // 请求接口
},
// 远程搜索
remoteMethod(query, callback) {
  this.loading = true
  this.phenotypeSearch.cn = query
  this.phenotypeSearch.pageNum = 1
  this.phenotypeList = []
  callback && callback()
  setTimeout(() => {
    this.loading = false
    this.readAllUsers() // 请求接口
  }, 200)
},
// 获取数据
readAllUsers() {
  let params = {
    pageNum: this.phenotypeSearch.pageNum,
    pageSize: this.phenotypeSearch.pageSize,
    cn: this.phenotypeSearch.cn,
  }
  findListByConditionFun(params).then((res) => {
    this.phenotypeSearch.totalPage = res.data.totalRecords
    this.phenotypeList = this.phenotypeList.concat(
      res.data.data.map((i) => {
        return {
          id: i.id,
          value: i.hpNumber,
          label: i.cn,
        }
      })
    )
  })
},

image-20230823174334877

监听元素宽高变化指令

在 main.js 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 自定义监听元素高度变化指令
const resizerMap = new WeakMap()
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const handle = resizerMap.get(entry.target)
    if (handle) {
      handle({
        width: entry.borderBoxSize[0].inlineSize,
        height: entry.borderBoxSize[0].blockSize,
      })
    }
  }
})
Vue.directive('resize', {
  bind(el, binding) {
    resizerMap.set(el, binding.value)
    resizeObserver.observe(el)
  },
})

使用自定义指令

1
<div v-resize="getHeight">

表格设置高度

1
2
3
4
5
6
7
8
9
10
11
<el-table
  v-loading="tableLoading"
  class="mt-2"
  id="elTable"
  ref="elTable"
  :height="tableHeight"
  :data="tableData"
  stripe
  border
  style="width: 100%"
>
1
2
3
4
5
data(){
    return{
        tableHeight: 0, // 设置一个初始高度
    }
}

在 methods 中添加方法即可

1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置表格高度
getHeight() {
  // 右侧总高度
  const mainHeight = document.querySelector('.right-content').offsetHeight
  // 表格距离顶部的高度
  const elTable = document.querySelector('#elTable').getBoundingClientRect()
  // 导航栏高度
  const navH = 60
  // 底部padding
  const bottomP = 30
  // 计算得到高度
  this.tableHeight = mainHeight - (elTable.top - navH) - bottomP
},