<テンプレート>
<カード>
<エル・ポップオーバー
配置=「右」
幅= "400"
トリガー=「クリック」
>
<EL-テーブル
REF = "singleTable"
：データ= "pinyinOptions"
ハイライト現在行
スタイル= "幅：100％"
@現在のチェンジ=「handleCurrentChange」
>
<EL-テーブル列
タイプ=「インデックス」
幅= "50"
/>
<EL-テーブル列
プロパティ=「日付」
ラベル=「日付」
幅= "120"
/>
<EL-テーブル列
プロパティ=「名前」
ラベル=「名前」
幅= "120"
/>
<EL-テーブル列
プロパティ=「アドレス」
ラベル=「住所」
/>
</ EL-表>
<！ - <divのスタイル= "マージントップ：20ピクセル">
<エルボタン@クリック= "setCurrent（たtableData [1]）">第二行は、選択</ EL-ボタン>
<EL-ボタン@クリック= "setCurrent（）">取消选择</ EL-ボタン>
</ DIV> - >
<EL-入力
スロット=「参照」
Vモデル=「入力」
スタイル=「幅：400ピクセル」
@入力= "PinyinMatch"
@ keyup.enter.native = "SEL"
/>
</ EL-ポップオーバー>
</カード>
</テンプレート>
<スクリプト>
輸出のデフォルト{
データ（）{
{戻ります
たtableData：[{
日：「2016年5月2日」
名前：「ジョン・ドウ」
住所：「上海」
}、{
日：「2016年5月4日」
名前：「趙Xiaohu」
アドレス：「石家荘」
}、{
日：「2016年5月1日」
名前：「ジョン・ドウ」
アドレス：「保定」
}、{
日：「2016年5月3日」
名前：「趙6」
アドレス：「唐山」
}]、
currentRowの：ヌル、
入力： ''、
pinyinOptions：[]
}
}、
作成した（） {
this.pinyinOptions = this.tableData
}、
方法：{
setCurrent（行）{
この。$ refs.singleTable.setCurrentRow（行）
}、
handleCurrentChange（ヴァル）{
this.currentRow =ヴァル
もし（ヴァル！==未定義）{
this.input = val.name
}他{
this.input = ''
}
}、
PinyinMatch（ヴァル）{
CONST PinyinEngineは=（ 'ピンインエンジン'）を必要とします
//データのインデックスを作成します。
constのpinyinEngine =新しいPinyinEngine（this.tableData、[ '名前']）
//クエリ
CONST pinyinVal = pinyinEngine.query（ヴァル）
this.pinyinOptions = pinyinVal
}、
セル（）{
this.input = this.pinyinOptions [0] .nameの
}
}
}
</ SCRIPT>