vuejs2 - kendo-vue-ui 如何在下拉列表的末尾添加一个按钮

Question

我正在尝试使用Vue templates.

示例在链接上给出

示例中显示的示例将按钮添加到列表中项目的每次迭代。

但我想显示如下图所示的项目：

我现在做了什么：

<template>
     <kendo-dropdownlist v-model="dropdownlistValue" 
                        :template="itemTemplate"
                        :data-source="CompanyList"
                        :data-text-field="'text'"
                        :data-value-field="'value'"
                        :filter="'contains'">
     </kendo-dropdownlist>
</template>

<script>
   import Vue from 'vue'
   import Template from "./Template.vue";
   var itemTemplate = Vue.component(Template.name, Template);
   export default {
    methods: {
      itemTemplate: function(e) {
         return {
           template: itemTemplate,
           templateArgs: e
         };
      }
    }
  }
</script>

模板.Vue

<template>
    <span>
        <button @click="buttonClick">{{templateArgs.value}}</button>
        {{templateArgs.text}}
    </span>
</template>

<script>
export default {
  name: "template1",
  methods: {
    buttonClick: function(e) {
      alert("Button click");
    }
  },
  data() {
    return {
      templateArgs: {}
    };
  }
};
</script>

我如何在最后的剑道下拉列表中添加按钮模板。不在列表中项目的每次迭代中。

或者，还有其他解决方法吗？

请帮忙！

Answer 1

我可以使用footer-template默认情况下在 Kendo-Ui-Vue 上可用的 , 来解决这个问题。

下面是我使用的一些代码片段。

HTML

<kendo-dropdownlist 
         @open="onOpen" 
         :footer-template="footerTemplate"
         v-model="dropdownlistValue" 
         :data-source="CompanyList"
         :data-text-field="'text'"
         :data-value-field="'value'"
         filter="'contains'"> 
</kendo-dropdownlist>

SCRIPT

methods: {
    onOpen(e) {
        var deleteAction = document.body.querySelectorAll(".k-footer");
        deleteAction.forEach(el => {
            el.addEventListener("click", this.buttonClick);
        });
    },
    buttonClick() {
        alert("hello")
    } 
},
data() {
      return {
       Title: null,
       footerTemplate: '<button type="button" class="btn btn-link btn-sm">Add New...</button>'
   }
}