调用:
<autocomplete v-model="form.read" :hint="tables" :name="'name'"></autocomplete>
v-model是输入框的值
hint是提示框的内容数组或对象
name是提示框内需要拿到的字段名
组件:
<template>
<el-autocomplete class="inline-input"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
popper-class="popper">
<template slot-scope="{ item }">
<div class="name">{{ item[name] }}</div>
</template>
</el-autocomplete>
</template>
<script>
import {
Component,
Mixins,
Watch,
Vue,
Emit,
Prop
} from 'vue-property-decorator'
import MyPagination from '@/mixins/pagination'
import MyDelete from '@/components/publiccomponent/MyDelete.vue'
@Component({
components: {
MyDelete // 声明子组件的引用
}
})
export default class fieldLoadTo extends Mixins(MyPagination) {
@Prop()
hint
@Prop()
value
@Prop()
name
@Emit()
input (state) {}
state = ''
get loadAll () {
return Object.values(this.hint)
}
querySearch (queryString, cb) {
const restaurants = this.loadAll
console.log(Object.values(restaurants))
console.log(restaurants, 'restaurants')
const results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants
// 调用 callback 返回建议列表的数据
console.log(results)
cb(results)
}
handleSelect (item) {
this.state = item[this.name]
this.input(this.state)
console.log(item)
}
createFilter (queryString) {
return (restaurant) => {
return restaurant[this.name].indexOf(queryString) == 0
}
}
// mounted () {
// this.restaurants = this.loadAll()
// }
}
</script>
<style scoped>
.popper {
width: 300px;
}
</style>
可以节流的autotemplate,防止表格中使用卡顿
<template>
<!-- -->
<el-autocomplete class="inline-input"
v-model="state"
:debounce="debounce"
:fetch-suggestions="querySearch"
:size="size"
placeholder="请输入内容"
:trigger-on-focus="triggerOnFocus"
@select="handleSelect"
@blur="blur"
@focus="focus"
@keyup.enter.native="change(state)"
popper-class="popper">
<template slot-scope="{ item }">
<div class="name"
v-if="name">{{ item[name] }}</div>
<div class="name"
v-else>{{ item }}</div>
</template>
</el-autocomplete>
</template>
<script>
import debounce from 'throttle-debounce/debounce'
export default {
props: {
hint: {
type: Array,
},
value: {
type: [Object, String],
},
name: {
type: String,
},
// 是否搜索,默认搜索,
type: {
type: Number,
default: 1,
},
// 组件大小
size: {
type: String,
default: 'mini',
},
triggerOnFocus: {
type: Boolean,
default: false,
},
debounce: {
type: Number,
default: 200,
},
},
data() {
return {
state: '',
debounceFunc: () => {},
}
},
computed: {
loadAll() {
return Object.values(this.hint)
},
},
methods: {
querySearch(queryString, cb) {
const restaurants = this.loadAll
// console.log(restaurants,'restaurants');
if (this.type == 1) {
const results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants
cb(results)
} else {
cb(restaurants)
}
},
handleSelect(item) {
if (this.name) {
this.state = item[this.name]
} else {
this.state = item
}
this.input(this.state)
},
// 过滤
createFilter(queryString) {
if (this.name) {
return (restaurant) => {
return (
restaurant[this.name]
.toLowerCase()
.indexOf(queryString.toLowerCase()) != -1
)
}
} else {
return (restaurant) => {
return (
restaurant.toLowerCase().indexOf(queryString.toLowerCase()) == 0
)
}
}
},
input(value) {
this.$emit('input', value)
},
blur() {
this.$emit('blur')
},
focus() {
this.$emit('focus')
},
change(value) {
this.$emit('change', value)
},
},
watch: {
value: {
handler(value) {
this.state = value
},
deep: true,
immediate: true,
},
state: {
handler(value) {
// this.input(this.state)
// this.change(this.state)
this.debounceFunc()
},
deep: true,
},
},
mounted() {
this.debounceFunc = debounce(200, () => {
this.input(this.state)
this.change(this.state)
// console.log(this.state)
})
},
}
</script>
<style scoped>
/* .popper {
width: 300px;
} */
.name {
width: auto;
}
</style>