kendo-vue-uiドロップダウンリストの最後にボタンを追加する方法

debugcn 投稿 Dev

aakash

を使用して、剣道ドロップダウンリストのリストの最後にボタンを追加しようとしています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>

Template.View

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

最後に剣道のドロップダウンリストにボタンテンプレートを追加するにはどうすればよいですか。リスト内のアイテムの各反復ではありません。

または、他に回避策はありますか？

助けてください！

aakash

この問題は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>'
   }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]