SOURCE

console 命令行工具 X clear

                    
>
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");