// 使用组件
<template>
<div id="app">
<p>本地测试</p>
<div style="height: 300px; width: 500px">
<autocomplete v-model="content" :rules="rulesLocal" @matched="matchedLocal"/>
</div>
<p>远程测试</p>
<div style="height: 300px; width: 500px">
<autocomplete v-model="content" remote :rules="rules" :options="options" :loading="loading" @matched="matched"/>
</div>
</div>
</template>
<script>
// 安装组件
import Autocomplete from '@thtf/vue-autocomplete'
// 引用组件
export default {
components: {
Autocomplete
},
data() {
return {
content: {
html: '',
text: '',
},
// 本地相关参数
rulesLocal: [
{
rule: /\[/,
enterAdd: '&',
data: [
{
label: '指标1',
value: 'foo1',
children: [
{
label: '时点1',
value: 'bar1',
children: [
{label: '计量单位1', value: 'foobar1'},
],
},
{label: '时点2', value: 'bar2'},
{label: '时点3', value: 'bar3'},
],
},
{label: '指标2', value: 'foo2'},
{label: '指标3', value: 'foo3'},
]
},
{
rule: /{/,
enterAdd: '&',
data: [
{
label: '指标1',
value: 'foo1',
children: [
{
label: '时点1',
value: 'bar1',
children: [
{label: '计量单位1', value: 'foobar1'},
{label: '计量单位2', value: 'foobar2'},
{label: '计量单位3', value: 'foobar3'},
],
},
{label: '时点2', value: 'bar2'},
{label: '时点3', value: 'bar3'},
],
},
{label: '指标2', value: 'foo2'},
{label: '指标3', value: 'foo3'},
],
},
],
// 远程相关参数
loading: false,
options: [],
rules: [
{
rule: /\[/,
enterAdd: '&',
},
{
rule: /{/,
enterAdd: '&',
},
],
};
},
methods: {
// 本地回调事件
matchedLocal(rule, query, row) {
// console.log(`rule ${JSON.stringify(rule)}`);
// console.log(`query ${JSON.stringify(query)}`);
// console.log(`row ${JSON.stringify(row)}`)
},
// -------------------------------------------------
// 远程回调事件
matched(rule, query, row) {
console.log(`rule ${JSON.stringify(rule)}`);
console.log(`query ${JSON.stringify(query)}`);
console.log(`row ${JSON.stringify(row)}`);
if (row) {
// 调用后台接口获取数据
this.loading = true;
// 模拟查询条件。
// 如果 query 为空,返回指标的相关数据
// 如果 query 为foox,即指标相关的值,则返回时点的相关数据
// 如果 query 为 [foox, barx],即指标和时点相关的值,则返回计量单位的相关数据
let params = null;
if (query.length === 0) {
params = 1;
} else if (query.length === 1) {
params = 2;
} else if (query.length === 2) {
params = 3;
}
this.getData(params).then((response) => {
this.loading = false;
this.options = response;
});
}
},
// 模拟后台接口
getData(params) {
const mockData = {
1: [
{label: '指标1', value: 'foo1'},
{label: '指标2', value: 'foo2'},
{label: '指标3', value: 'foo3'},
],
2: [
{label: '时点1', value: 'bar1'},
{label: '时点2', value: 'bar2'},
{label: '时点3', value: 'bar3'},
],
3: [
{label: '计量单位1', value: 'foobar1'},
{label: '计量单位2', value: 'foobar2'},
{label: '计量单位3', value: 'foobar3'},
],
};
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockData[params]);
}, 100);
});
},
}
}
</script>