test

src/components/xc/select-v2/TestElSelectV2.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-select v-model="props.modelValue" placeholder="Select" ref="select" @visible-change="visible"
+             :teleported="false">
+    <el-option
+        v-for="item in listData"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+    >
+      <span>{{ item.label }}</span>
+      <span>{{ item.value }}</span>
+    </el-option>
+  </el-select>
+</template>
+
+<script setup name='TestElSelectV2'>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  data: {
+    type: Array,
+  }
+})
+
+let select = $ref(null)
+
+const itemHeight = 34
+let start = $ref(0)
+const containerHeight = 274
+const itemCount = Math.ceil(containerHeight / itemHeight)
+let translateY = $ref(0)
+
+const listData = computed(() => {
+  return props.data.slice(start, start + itemCount + 1)
+})
+
+watch(
+    () => props.data,
+    () => {
+
+    },
+    {immediate: true, deep: true}
+)
+
+onMounted(() => {
+  nextTick(() => {
+    let dropdownList = select.$el.querySelectorAll('.el-select-dropdown .el-select-dropdown__wrap')[0]
+    let ul = dropdownList.querySelectorAll('ul')[0]
+    ul.style.height = props.data.length * 37 + 'px'
+
+    // ul
+    // dropdownList.addEventListener('scroll', e => {
+    //   const {scrollTop} = e.target
+    //   start = Math.floor(scrollTop / itemHeight)
+    //   console.log(start)
+    // })
+
+  })
+})
+
+
+const visible = (val) => {
+  // console.log(option)
+  let dropdownList = select.$el.querySelectorAll('.el-select-dropdown .el-select-dropdown__wrap')[0]
+  let ul = dropdownList.querySelectorAll('ul')[0]
+  dropdownList.addEventListener('scroll', e => {
+    const {scrollTop} = e.target
+    ul.style.transform = `translateY(${scrollTop}px)`
+    start = Math.floor(scrollTop / itemHeight)
+  })
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Test.vue

@@ -0,0 +1,69 @@
+<template>
+  <TestElSelectV2 v-model="obj.tcode" :data="data"></TestElSelectV2>
+  <xc-select-v2 style="width: 120px; " v-model="obj"
+                value="tcode" label="tname"
+                :data="data" :remote-method="testmethod"/>
+  <!--  <el-select-v2 v-model="obj.tcode" :options="data"-->
+  <!--                clearable-->
+  <!--                remote-->
+  <!--                filterable-->
+  <!--                :remote-method="testmethod"-->
+  <!--                style="top: 780px"-->
+  <!--  ></el-select-v2>-->
+  测试:
+  <xc-select-v2 style="width: 120px;top: 780px;left: 890px" v-model="obj"
+                value="tcode" label="tname"
+                id="2"
+                :data="data" :remote-method="testmethod" clearable/>
+  <el-button @click="test1">清空</el-button>
+</template>
+
+<script setup name='Test'>
+import sleep from "@/utils/sleep";
+import TestElSelectV2 from "@/components/xc/select-v2/TestElSelectV2.vue";
+
+const obj = $ref({
+  tcode: '',
+  tname: ''
+})
+
+let data = $ref([])
+
+const testmethod = (val) => {
+  console.log(val)
+}
+
+const test1 = async () => {
+  data = []
+  await sleep(1000)
+  obj.tcode = 'ad'
+  await sleep(1000)
+  // console.log('数据来了')
+  for (let i = 0; i < 5; i++) {
+    data.push({
+      value: i.toString(),
+      label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
+    })
+  }
+  obj.tcode = '1'
+}
+
+for (let i = 0; i < 1000; i++) {
+  data.push({
+    value: i.toString(),
+    label: i === 4 ? 'asdghashjgdhjasgdhjasgdhjasgdhjasgdjhasdg' : 'test' + i
+  })
+}
+
+const te = (val) => {
+  console.log(val)
+}
+
+setTimeout(() => {
+  obj.tcode = '234'
+}, 1000)
+</script>
+
+<style scoped>
+
+</style>