console
var Main = {
data() {
return {
loading: false,
tableData: [],
stateOptions: [
{
value: "asd",
label: "asd"
},
{
value: "123",
label: "123"
}
],
stateList: [],
stateloading: false,
states: [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
],
}
},
computed: {
tableColumn() {
return [{
type: "index",
title: "No."
},
{
field: "state",
title: "物料编码",
width: "200",
editRender: {
name: "ElSelect",
options: this.stateOptions,
props: {
filterable: true,
filterMethod: this.remoteStateMethod
}
}
}]
}
},
created() {
var list = [];
for (var index = 0; index < 10; index++) {
list.push({
id: index + 10000,
name: "test" + index,
role: "developer",
sex: "1",
sex1: ['0'],
age: 10,
date: "2019-05-01",
time: 1556677810888 + index * 500,
region: "ShenZhen",
address: "address abc" + index,
flag: true,
rate: 3
});
}
this.tableData = list;
this.stateList = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
remoteStateMethod(query) {
if (query !== "") {
this.stateloading = true;
setTimeout(() => {
this.stateloading = false;
this.stateOptions = this.stateList.filter(item => {
return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.stateOptions = [];
}
},
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="//unpkg.com/vue">
</script>
<script src="//unpkg.com/xe-utils">
</script>
<script src="//unpkg.com/element-ui">
</script>
<script src="//unpkg.com/vxe-table">
</script>
<script src="//unpkg.com/vxe-table-plugin-element">
</script>
<div id="app">
<template>
<div>
<vxe-grid border resizable class="vxe-table-element" :edit-config="{trigger: 'click', mode: 'cell'}" height='400' :data='tableData'
:columns='tableColumn'>
</vxe-grid>
</div>
</template>
</div>
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
@import url("//unpkg.com/vxe-table/lib/index.css");
@import url("//unpkg.com/vxe-table-plugin-element/dist/style.css");