vue 穿梭框实现拼音搜索

2024-09-03

如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索

1.汉字: 直接添加对应的 filterable 2.拼音: 穿梭框和选择器的实现方式有所不同选择器: <1>下载pinyin-match: npm i --save pinyin-match <2>在main.js引入并注册为全局属性 import PinyinMatch from 'pinyin-match'; Vue.prototype.$pinyinmatch = PinyinMatch; <3>为需要

krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦

博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构的博客关于 Element 组件的穿梭框的重构,当时还有一些同学直接通过微信询问很多关于这个组件的问题去年在上家公司就重构过的穿梭框,一直懒得封装成一个 Vue 组件发布到 npm,现在趁着目前比较闲,就这几天继续完善和优化.迭代更新 + 封装,终于发布啦~ krry-transfer 基于 E

vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer http://element-cn.eleme.io/#/zh-CN/component/transfer 直接上代码 <template> <div class="auth-user-list"> <el-breadcrumb separator="/"> <el-breadcrumb-item>

vue实现穿梭框效果

vue实现穿梭框效果一.总结一句话总结: 用两个数组分别记录左右框框里面的值,用两个数组绑定checkbox,用来记录选中的checkbox值,根据选中的checkbox的值实现删除增加即可 1.这里checkbox是绑定的vue的数组数据,所以checkbox的点击的顺序不同的话索引的顺序是不同的,这样删除数据的时候可能会出错(比如删0再删2的时候,2已经变成了1,没2了删就会报错)? 对这个数组按照从大到小排序,从大到小删就不会出问题 2.vue实现穿梭框过程中最容易犯的错误是什么? c

Vue实现拖拽穿梭框功能四种方式

一.使用原生js实现拖拽点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position: absolute; line-height: 100px; text-align: cente

【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

最近做了一个需求在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意图在这里遇到问题了问题是我要获取到右边我选取的人的工号和姓名,但是根据elementUI的文档提供的方法,渲染上去的信息都有一个唯一的key,在设置的时候 ↓ data.push({ key: i, label: `备选项 ${ i }`, disabled: i % === }); @cha

VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足,于是自己基于ElementUI和VUE2.X做了一个小组件,优化的地方还很多,但是能够基本满足业务需求,后面有时间也会努力去改的更加灵活.我是新手程序员,大佬们看到了有什么可以优化的地方希望能够指正. <template> <!-- 自定义树形穿梭框组件.理论上左右均

Vue2 实现时空穿梭框功能模块

前言这篇文章主要是分享一个时空穿梭框功能,也就是我们平时用的选择功能.勾选了的项就会进入到另一个框中. 时空穿梭框之旅示例演示: 这个时空穿梭框实现了: 1.可以全选.反选 2.没有选中时,不可以点穿梭按钮 3.自动计数(共有多少个,选中了多少个) 4.没有数据时,全选不可点击这里主要是想通过这个示例来抛砖引玉,更多的功能,你可以根据自己的实践需要来实现.下面我们就来看看这示例的相关文件及代码. 文件结构 ├── index.html ├── main.js ├── router │ └─

自定义SWT控件五之自定义穿梭框

5.自定义穿梭框 package com.view.control.shuttlebox; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Map.Entry; import org.eclipse.swt.SWT; import org.eclipse.swt.custom.CLabel; import org.

element-ui 穿梭框使用axios数据查询

//class="input"样式自写,用来覆盖穿梭框自带的搜索,它自带的搜索框不能搜索外部数据,只能查询在穿梭框内的数据 <div style="text-align: center" class="el-transfers"> <el-transfer style="text-align: left; display: inline-block" v-model="username"

Simple: 一个支持中文和拼音搜索的 sqlite fts5插件

之前的工作关系,需要在手机上支持中文和拼音搜索.由于手机上存储数据一般都是用 sqlite,所以是基于 sqlite3 fts5 来实现.这段时间再次入门 c++,所以想用 c++ 实现一下,一来用于练手,二来当时做的时候发现网络上这方面开源的实现不多,也造福下其他人. 背景搜索现在几乎是每个 APP 必备的功能,用户已经习惯了搜索框搜一下,避免到处去找.搜索也是帮助用户查找旧信息,发现新功能的一个重要手段.平常我们用微信的时候经常会搜索联系人和聊天记录,发现微信这一块做的还是非常好的.关于微

【Solr】 solr对拼音搜索和拼音首字母搜索的支持

问:对于拼音和拼音首字母的支持,当你在搜商品的时候,如果想输入拼音和拼音首字母就给出商品的信息,怎么办呢? 实现方式有2种,但是他们其实是对应的. 用lucene实现 1.建索引, 多建一个索引字段,即拼音和拼音首字母这2个字段.合并的一个字段. (拼音和拼音首字母,可以通过pinyin4j.jar.将想要进行拼音搜索的字段进行拼音转换.) 2.对输入的参数判断是否是拼音,(可以通过将传人的值转换为 utf-8 形式,如果转换后的字符串长度大于原来的字符串的长度,那么就不是拼音.否则就进行拼

从零搭建 ES 搜索服务（四）拼音搜索

一.前言上篇介绍了 ES 的同义词搜索,使我们的搜索更强大了,然而这还远远不够,在实际使用中还可能希望搜索「fanqie」能将包含「番茄」的结果也罗列出来,这就涉及到拼音搜索了,本篇将介绍如何具体实现. 二.安装 ES 拼音插件 2.1 拼音插件简介 GitHub 地址:https://github.com/medcl/elasticsearch-analysis-pinyin 2.2 安装步骤 ① 进入 ES 的 bin 目录 $ cd /usr/local/elasticsearch/bi

用MFC（C++）实现拼音搜索

2015年4月1日更新: 我在github开源了Objective-C版的拼音搜索项目,感兴趣的可以去看看: OC版拼音搜索最近项目需要实现按照拼音搜索资源.在网上找了一下,这方面的东西太少了. Java有一个开源的实现,但是没耐心看下去,毕竟对Java不是特别熟练.C++方面大多都是按照字符的编码去获取拼音.这又涉及到GB2312和UTF-8的转换问题.转来转去的,我都晕了.所以就还是自己写一个好了.没用什么比较牛的算法,所以效率上还有很多进步的空间.支持多音字.字库文件可以随时补充. 先把

php根据汉字获取拼音（php基于拼音搜索实现原理）

php根据汉字获取拼音(php基于拼音搜索实现原理) 代码一:获取字符串汉字首字母,兼容GBK和UTF-8 <?php function getfirstchar($s0){ //获取单个汉字拼音首字母.注意:此处不要纠结.汉字拼音是没有以U和V开头的 $fchar = ord($s0{0}); if($fchar >= ord("A") and $fchar <= ord("z") )return strtoupper($s0

elasticsearch实战中文+拼音搜索

需求雪花啤酒需要搜索雪花.啤酒 .雪花啤酒.xh.pj.xh啤酒.雪花pj ik导入参考https://www.cnblogs.com/LQBlog/p/10443862.html,不需要修改源码步骤就行拼音分词器导入跟ik一样下载下来打包移动到es plugins 目录名字改为pinyin https://github.com/medcl/elasticsearch-analysis-pinyin 测试 get请求:http://127.0.0.1:9200/_analyze b

Ant Design Pro中Transfer穿梭框的实际用法（与后端交互）

Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant Design官方文档先来看需求是怎样的,以及实现的效果需求:管理某个场馆中的活动,可以对这个场馆进行加入活动和移出活动. 如图,初始进入到这个页面后,韵苑体育馆中有两个活动:活动1.活动5,其余活动在右边的框中(不属于该场馆).选中右边框中的活动,可以进行移入操作.选中左边的活动,可以进行移出活

vue2.0 + element ui 实现表格穿梭框

element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两个框的分页是联动的,左边翻页了右边也会跟着翻页.若要取消这种关联关系,可参考这篇文章: https://www.cnblogs.com/alice-bj/articles/10703903.html#_label4 本文参考了穿梭框的实现思路,实现了可分页的表格穿梭框,同时涉及到了表格多选与表格里添

elasticsearch之拼音搜索

拼音搜索在中文搜索环境中是经常使用的一种功能,用户只需要输入关键词的拼音全拼或者拼音首字母,搜索引擎就可以搜索出相关结果.在国内,中文输入法基本上都是基于汉语拼音的,这种在符合用户输入习惯的条件下缩短用户输入时间的功能是非常受欢迎的: 一.安装拼音搜索插件下载对应版本的elasticsearch-analysis-pinyin插件: https://github.com/medcl/elasticsearch-analysis-pinyin/releases/download/v7.9.2/e

多选穿梭框总结（vue + element）

博客地址:https://ainyi.com/23 示例介绍实现省市区三级多选联动,可任选一个省级.市级.区级,加入已选框,也可以在已选框中删除对应的区域. 选择对应仓库,自动勾选仓库对应的省,取消就反选选择同样地区,选择省级或市级,若该对象下面的市级或区级已有选择,就自动合并为一个省级或市级: 例如: 已选择:广东省广州市荔湾区点击加入:广东省广州市最后显示:广东省广州市广州市已被选择,对应市级的区将不显示,只显示对应的市同理:选择广东省,也将下面已选择的所有的市或区合并成一个省

vue 穿梭框实现拼音搜索

热门专题