el-popover 点击input框出现table表，可点击选中，可拼音检索完回车选中

<template>

<card>

<el-popover

placement="right"

width="400"

trigger="click"

>

<el-table

ref="singleTable"

:data="pinyinOptions"

highlight-current-row

style="width: 100%"

@current-change="handleCurrentChange"

>

<el-table-column

type="index"

width="50"

/>

<el-table-column

property="date"

label="日期"

width="120"

/>

<el-table-column

property="name"

label="姓名"

width="120"

/>

<el-table-column

property="address"

label="地址"

/>

</el-table>

<!-- <div style="margin-top: 20px">

<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>

<el-button @click="setCurrent()">取消选择</el-button>

</div> -->

<el-input

slot="reference"

v-model="input"

style="width:400px"

@input="PinyinMatch"

@keyup.enter.native="sel"

/>

</el-popover>

</card>

</template>

<script>

export default {

data() {

return {

tableData: [{

date: '2016-05-02',

name: '张三',

address: '上海'

}, {

date: '2016-05-04',

name: '赵小虎',

address: '石家庄'

}, {

date: '2016-05-01',

name: '李四',

address: '保定'

}, {

date: '2016-05-03',

name: '赵六',

address: '唐山'

}],

currentRow: null,

input: '',

pinyinOptions: []

}

},

created() {

this.pinyinOptions = this.tableData

},

methods: {

setCurrent(row) {

this.$refs.singleTable.setCurrentRow(row)

},

handleCurrentChange(val) {

this.currentRow = val

if (val !== undefined) {

this.input = val.name

} else {

this.input = ''

}

},

PinyinMatch(val) {

const PinyinEngine = require('pinyin-engine')

// 建立数据索引

const pinyinEngine = new PinyinEngine(this.tableData, ['name'])

// 查询

const pinyinVal = pinyinEngine.query(val)

this.pinyinOptions = pinyinVal

},

sel() {

this.input = this.pinyinOptions[0].name

}

}

}

</script>

转载于:https://www.cnblogs.com/hellofangfang/p/10972721.html