窗口内的kendo-vue下拉列表无法正常工作

Posted 2021-04-05

我几个小时都在苦苦挣扎，但我找不到任何办法让它发挥作用。

问题是如果你把它放在一个窗口里，下拉列表就不起作用了。在这里你有一个例子。

https://plnkr.co/edit/eBpc4kEcHr7uSq6Zdq6h?p=preview

<kendo-window :width="'300px'" :title="'Window title'" :visible="visible" style="display:none">

<kendo-datasource ref="datasource" :type="'odata'" :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
</kendo-datasource>

<kendo-dropdownlist :data-source-ref="'datasource'" :data-text-field="'ProductName'" :data-value-field="'ProductID'" :placeholder="'Select product'">
</kendo-dropdownlist>

HTTPS://demos.tel Erik.com/kendo-UI/service/north wind.SVC/products">

这是一个解决方法吗？

问候。

答案

我看不出你在尝试什么有什么问题，但它适用于internal slot datasource：

  <kendo-window
          :width="'300px'"
          :title="'Window title'"
          :visible="visible"
          style="display:none">

      <kendo-dropdownlist
              :data-text-field="'ProductName'"
              :data-value-field="'ProductID'"
              :option-label="'Select product'">

          <kendo-datasource
                  slot="kendo-datasource"
                  :type="'odata'"
                  :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products'">
          </kendo-datasource>

      </kendo-dropdownlist>

  </kendo-window>

另一答案

它看起来像一个错误 - 我记录了它here。您可以使用临时使用内部插槽（由rareclass建议）作为here

 <kendo-window :width="'300px'"
              :title="'Window title'"
              :visible="visible"
              style="display:none">
    <h4>Window content</h4>
        <kendo-dropdownlist style="width: 100%" :data-text-field="'ContactName'" >
        <kendo-datasource slot="kendo-datasource"
                          :type="'odata'"
                          :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'"
                          :group-field="'Country'">
        </kendo-datasource>
   </kendo-dropdownlist>
</kendo-window>