console
new Vue({
el: "#app",
data() {
return {
fApi: {},
loading: false,
rule: [{
type: "Select",
title: "自动完成",
field: "auto2",
props: {
filterable: true,
remote: true,
remoteMethod: this.remoteMethod,
loading: false
},
options: []
}],
options: [{
value: "1",
label: "好用",
disabled: true
},
{
value: "2",
label: "方便",
disabled: false
},
{
value: "3",
label: "实用",
disabled: false
},
{
value: "4",
label: "有效",
disabled: false
}],
};
},
methods: {
remoteMethod(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
//只要拿到 auto2组件对应的规则,修改 options 即可
this.fApi.getRule('auto2').options = [{
value: query,
label: query,
disabled: true
},
{
value: query+query,
label: query+query,
disabled: false
}]
},
200);
} else {
this.fApi.getRule('auto2').options = [];
}
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/iview/dist/iview.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@form-create/iview/dist/form-create.min.js">
</script>
<div id="app">
<form-create v-model="fApi" :rule="rule" />
</div>
@import url("//cdn.jsdelivr.net/npm/iview/dist/styles/iview.css");
#app {
padding: 32px;
}