AutoComplete

AutoComplete

用于基础的后台管理系统页面中，联想下拉选择框，可对数据源的数据进行本地检索，输出检索结果

本地检索

dataSource 是本地检索的数据源

<template>
  <th-auto-complete v-model="value" :dataSource="list" placeholder="请输入"></th-auto-complete>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      list: [
        { value: '北京1' },
        { value: '上海1' },
        { value: '广州1' },
        { value: '深圳1' },
      ],
    };
  }
};
</script>

<style></style>

Expand Copy Copy

远程检索

remote-api 是远程检索的方法属性，如 querySearch(queryString, key)，在该方法中你可以将远程检索的结果数据通过 return 返回到 autocomplete 组件中。

<template>
  <th-auto-complete 
    v-model="value" 
    :remote-api="(value) => querySearch(value, 'title')" 
    placeholder="请输入"
  ></th-auto-complete>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    };
  },
  methods: {
    async fetchData(params) {
      await new Promise((resolve) => setTimeout(resolve, 1000))
      // 模拟接口返回的数据
      const res = {
        code: 100,
        data: ['北京2', '上海2', '广州2', '深圳2']
      }
      return res
    },
    // 加载下拉远程查询数据
    async querySearch(queryString, key) {
      let params = {
        field_name: key,
        field_value: queryString
      }
      const { code, data } = await this.fetchData(params)
      if (code === 100) {
        return data.map((item) => ({ value: item }))
      }
      return []
    },
  }
};
</script>

<style></style>

Expand Copy Copy

AutoComplete Attributes

参数	说明	类型	可选值	默认值
dataSource	数据源（本地检索）	array	---	---
value / v-model	绑定值	string	---	---
placeholder	输入框占位文本	string	---	---
disabled	是否禁用	boolean	---	false
clearable	是否可清空	boolean	---	false
defaultShow	默认显示多少条	number	---	50
customClass	自定义类名	string	---	search-input
remoteApi	远程搜索的API	Function(queryString, key)	---	---