vue根据element-ui输入框自动补全，input中的autocomplete属性

沈行的专栏

已于 2022-10-25 13:42:42 修改

阅读量1w

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

于 2021-02-03 14:41:46 首次发布

本文链接：https://blog.csdn.net/walk_man_3/article/details/113603850

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、element-ui官网上，input输入框

输入内容前是这种：

输入内容后是这种：主要是根据描述匹配

代码部分：

<template>
    <div class="home">
        <div class="nav">
            <div class="search-refresh">
                <el-row>
                    <el-button type="primary" round icon="el-icon-refresh" @click="handleSelect">刷新列表</el-button>
                </el-row>
                <el-input
                        style="margin-left: 10px"
                        v-model="state"
                        placeholder="请输入关键字进行过滤"
                        @input="handleSelect">
                </el-input>
            </div>
            <div class="box">
                <span>在线设备数:{{preTableData.length}}</span>
            </div>
        </div>
        <div>
            <el-table class="table-page-style" :data="tableData" stripe :default-sort="{prop: 'dev_id', order: 'descending'}" style="width: 100%">
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column prop="dev_id" label="设备ID" sortable width="280"></el-table-column>
                <el-table-column prop="online_time" label="在线时长" sortable width="380">
                </el-table-column>
                <el-table-column prop="dev_desc" label="描述"></el-table-column>
                <el-table-column label="#" width="200">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">连接</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <HelloWorld msg="Welcome to Your Vue.js App"/>
    </div>
</template>

export default {
        name: 'Home',
        components: {
            HelloWorld
        },
        data() {
            return {
                input: 'hhh',
                restaurants: [],
                state: '',
                preTableData: [],
                tableData: [],
                timer: null
            }
        },
        mounted() {
            this.deviceList()
            this.restaurants = this.loadAll()
        },
        destroyed() {
            // 销毁setTimeout事件
            clearTimeout(this.timer)
        },
        methods: {
            handleSelect(value) {
                let array = this.preTableData.filter(v => {
                    if (v.dev_desc.indexOf(value) > -1) {
                        return true
                    }
                    return false
                })
                this.tableData = JSON.parse(JSON.stringify(array))
            },
            loadAll() {
                return this.tableData
            },
            handleEdit(index, row) {
                console.log(index, row)
                this.$router.push({
                    path: '/RttyImplement', query: {
                        id: row.dev_id
                    }
                })
            },
            //请求设备数据
            deviceList() {
                deviceList().then((response) => {
                    this.preTableData = response.data.data
                    this.handleSelect(this.state)
                    this.timer = setTimeout(() => {
                        this.deviceList()
                    }, 1000)
                    console.log("----------deviceList--", response.data.data)
                }).catch(() => {

                })
            },
        }
    }

每秒请求一次