vue-element输⼊框⾃动补全，input中的autocomplete属性1、element-ui官⽹上，input输⼊框
输⼊内容前是这种：
输⼊内容后是这种：主要是根据描述匹配
代码部分：
<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
v-model="state"
placeholder="请输⼊关键字进⾏过滤"
@input="handleSelect">
</el-input>
</div>
<div class="box">
<span>在线设备数:{{preTableData.length}}</span>
</div>
</div>
input标签placeholder属性<div>
<el-table class="table-page-style" :data="tableData" stripe :default-sort="{prop: 'dev_id', order: 'descending'}" >                <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, w)">连接</el-button>
</template>
</el-table-column>
</el-table>
</div>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
name: 'Home',
components: {
HelloWorld
},
data() {
return {
input: 'hhh',
restaurants: [],
state: '',
preTableData: [],
tableData: [],
timer: null
}
},
mounted() {
this.deviceList()
},
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(() => {
})
},
}
}
每秒请求⼀次

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。