javascript - 使用Vue在Kendo DropdownList中实现虚拟化

Question

我正在尝试使用 Vue.js 和 Kendo-UI 在下拉列表中实现虚拟化。我已经成功实现了虚拟化，但我很难理解 ValueMapper 的重要性。这意味着当用户向下滚动时，Dropdown 选项可以正确加载到 DropdownList 中，但是当用户在 Dropdown 列表中进行任何选择时就会出现问题。

当用户从下拉列表中选择任何值时，我在控制台中看到以下错误:

ValueMapper is not provided while the value is being set

我已阅读文档并得出结论，仅当需要预获取下拉选项时才需要实现值映射器(有关详细说明，请参阅 this)。

但即使我选择已加载的下拉选项，我也会收到上述错误。关于 valuemappers 肯定有一些我不理解的地方。

此外，我在后端使用不支持 IQueryable 的 dapper ORM，因此我编写了自定义 SQL 来获取分页数据。

这是我的 vue 代码:

<template>
  <div v-show="visibility=='true'">
    <label v-html="label">{{label}}</label>

    <kendo-datasource
      ref="remoteDatasource"
      :transport-read-url="getRequestUrl"
      transport-read-type="GET"
      transport-read-data-type="JSON"
      page-size="20"
      schema-data="Data"
      schema-total="Total"
      server-paging="true"
    ></kendo-datasource>

    <kendo-dropdownlist
      ref="dropdownlist"
      v-model="cntrlValue"
      height="130"
      virtual-item-height="26"
      :virtual-value-mapper="valueMapper"
      data-source-ref="remoteDatasource"
      data-text-field="dropdownText"
      data-value-field="dropdownValue"
      option-label="Select here..."
      @close="onSelect"
    ></kendo-dropdownlist>
  </div>
</template>

<script scoped>
import service from "somepath";
export default {
  name: "FormGroupSelect",
  props: {
    id: {
      default: "kendo-Dropdown",
      type: String
    },
    name: {
      type: String
    },
    label: String,
    visibility: String,
    dropdownKey: String
  },
  data() {
    return {
      cntrlValue: this.value
    };
  },
  watch: {
    value: function(newVal) {
      this.cntrlValue = newVal;
    }
  },
  methods: {
    onSelect: function() {
      this.$emit("Select", this.cntrlValue);
    },
    getRequestUrl: function() {
      return service.getDropdownOptionsRequestUrl(this.dropdownKey);
    }
  }
};
</script>

那么，即使我不想让用户选择尚未在下拉列表中加载的值，我是否也应该实现值映射器？如果是这样，通过读取所有可能的值然后搜索索引来实现它而不会给服务器带来负担的最佳方法是什么(因为这就是文档示例中的完成方式)。

Answer 1

在您的情况下，会观察到错误，因为您在使用 v-model 时最初设置了一个值。然而，正如 Kendo 文档 here 中所描述的那样- '从 Kendo UI R3 2016 版本开始，valueMapper 函数的实现是可选的。仅当小部件包含初始值或使用 value 方法时才需要它。'

如果您没有设置初始值，即使没有 valueMapper，组件也可以正常工作，如所示 here .