Question

我正在尝试使用Vue templates将按钮添加到Kendo Dropdownlist中的列表末尾。

该示例在link

上给出

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

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

我现在所做的：

<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>

Template.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>

如何在最后的kendo下拉列表中添加Button模板。而不是列表中项目的每次迭代。

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

请帮助！

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>'
   }
}

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

1 个答案: