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

Posted 2021-12-19 hellofangfang

<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>