Question

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

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

设置值时未提供ValueMapper

我已经阅读了文档，得出的结论是，仅当需要预提取下拉选项时才需要实现值映射器（有关详细说明，请参见this）。

但是，即使我选择了已经加载的下拉选项，也遇到了上述错误。关于valuemappers，肯定有些我不了解的东西。

此外，我在不支持IQueryable的后端中使用精巧的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>

因此，即使我不想让用户选择下拉菜单中尚未加载的值，我也应该实现值映射器吗？如果是这样，通过读取所有可能的值然后搜索索引（因为这是docs示例中的方法），在不增加服务器负担的情况下实现它的最佳方法是什么。

Answer 1

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

如果您未设置初始值，则即使没有valueMapper，组件也可以正常工作，可以看到here。

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

1 个答案: