How do I set the key for select v2 to prevent the entire visual list from being refreshed during virtual scrolling and reuse the dom using vue’s diff algorithm
<template>
<el-select-v2
:options="fun(props.valueKey, props.label, props.value)"
:label="props.label"
:value="props.value"
:value-key="props.valueKey">
</el-select-v2>
</template>
<script lang="ts" setup>
import { defineProps, ref,reactive } from 'vue';
const props = reactive({
optionsList: [],
label: 'name',
value: 'id',
valueKey:'id'
});
// 创建100个假数据项
const createFakeData = () => {
return Array.from({ length: 100 }, (_, index) => ({
id: index + 1, // 唯一标识符
name: `Item ${index + 1}`, // 显示名称
otherProperty: `Value ${index + 1}` // 其他可能的属性
}));
};
createFakeData()
// 将生成的假数据存入响应式引用
const optionsList = ref();
// 将原先的 props.optionsList 替换为我们创建的响应式引用
props.optionsList = optionsList;
const fun = (key: string, selectLabel: string, selectValue: string) => {
console.log("props",props);
return props.optionsList.map((item: any) => ({
label: item[selectLabel],
value: key ? item : item[selectValue]
}));
};
</script>