element-plus icon indicating copy to clipboard operation
element-plus copied to clipboard

fix(components): [select-v2] itemSize calc error when dynamic height

Open eric-gitta-moore opened this issue 3 years ago • 6 comments

Please make sure these boxes are checked before submitting your PR, thank you!

  • [x] Make sure you follow contributing guide English | (中文 | Español | Français).
  • [x] Make sure you are merging your commits to dev branch.
  • [x] Add some descriptions and refer to relative issues for your PR.

Using dynamic height on select-v2 will cause height calculation errors play

eric-gitta-moore avatar Jul 25 '22 07:07 eric-gitta-moore

👋 @james-curtis, seems like this is your first time contribution to element-plus.

  • Please make sure that you have read our guidelines and code of conduct before making a contribution.
  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

github-actions[bot] avatar Jul 25 '22 07:07 github-actions[bot]

Hello @james-curtis, thank you for contributing to element-plus, please see our guideline to see how to make contribution

github-actions[bot] avatar Jul 25 '22 07:07 github-actions[bot]

There seems to be a problem with the play link, and the content cannot be rendered normally.

btea avatar Jul 26 '22 06:07 btea

There seems to be a problem with the play link, and the content cannot be rendered normally.

Yes, at this time, the CPU utilization rate of the browser will be very high. There is a calculation error. That's the problem

eric-gitta-moore avatar Jul 26 '22 06:07 eric-gitta-moore

Please make sure these boxes are checked before submitting your PR, thank you!

  • [x] Make sure you follow contributing guide English | (中文 | Español | Français).
  • [x] Make sure you are merging your commits to dev branch.
  • [x] Add some descriptions and refer to relative issues for your PR.

Using dynamic height on select-v2 will cause height calculation errors play

The code of play is like this

<template>
  <el-select-v2
    v-model="value"
    :options="options"
    placeholder="Please select"
    :estimatedOptionHeight="50"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref('')
const options = Array.from({ length: 1000 }).map((_, idx) => ({
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}`,
}))
</script>

<style scoped>
.example-showcase .el-select-v2 {
  margin-right: 20px;
}
</style>

:estimatedOptionHeight="50" caused the bug

eric-gitta-moore avatar Jul 26 '22 06:07 eric-gitta-moore