console
var Main = {
data () {
return {
val1: null,
options: [
{ label: '1~', value: 1, items: {a: 1} },
{ label: '2~', value: 2, items: {a: 2} },
{ label: '3~', value: 3, items: {a: 3} },
{ label: '4~', value: 4, items: {a: 4} },
{ label: '5~', value: 5, items: {a: 5} },
{ label: '6~', value: 6, items: {a: 6} },
{ label: '7~', value: 7, items: {a: 7} },
]
}
},
methods: {
selectChange({ value, $event }) {
const { a } = value;
this.val1 = a;
}
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://unpkg.com/vue@2.6.14"></script>
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-pc-ui@3.5.29"></script>
<script src="https://unpkg.com/vxe-table@3.15.8"></script>
<div id="app">
<vxe-select v-model="val1" placeholder="可新增"
clearable filterable @change="selectChange"
:option-props="{ value: 'items' }"
:options="options">
<template #option="{option}">
<span>{{ option.label }} </span>
<span>---</span>
<span>{{ option.value }} </span>
<span>---</span>
<span>{{ option.items.a }} </span>
</template>
</vxe-select>
</div>
@import url("https://unpkg.com/vxe-pc-ui@3.5.29/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.15.8/lib/style.css");