<template>
<div>
<div class="control-section">
<div id="content"
style="margin: 0px auto; width: 300px; padding-top: 40px">
<ejs-dropdownlist ref="dropobj"
id="multi-template"
:dataSource="data"
:fields="fields"
:placeholder="watermark"
:valueTemplate="vTemplate"
popupHeight="450px"></ejs-dropdownlist>
</div>
</div>
</div>
</template>
<style>
</style>
<script>
import Vue from "vue";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { data } from "./datasource.js";
import { actionButton } from "./main";
Vue.use(DropDownListPlugin);
var valueVue = Vue.component("valueTemplate", {
template: '<div><button @mousedown="fun($event)">buttton</button></div>',
data() {
return {
data: {},
};
},
methods: {
fun: function (e) {
e.stopPropagation();
},
},
});
export default Vue.extend({
data: function () {
return {
data: data,
fields: { textField: "ShipName", value: "ShipName" },
watermark: "Select Employees",
actionButton: actionButton,
vTemplate: function (e) {
return {
template: valueVue,
};
},
};
},
methods: {},
});
</script>
<style>
</style> |