600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > elementUI的 tree搜索过滤 可识别拼音 且不区分大小写

elementUI的 tree搜索过滤 可识别拼音 且不区分大小写

时间:2023-08-27 08:33:51

相关推荐

elementUI的 tree搜索过滤 可识别拼音 且不区分大小写

1.首先需要安装

js 拼音库 CnChar ,这个库主要就是做汉字转拼音和汉字笔画数的。

<el-inputplaceholder="输入标题进行过滤"v-model="filterText"></el-input><el-treeclass="filter-tree":data="data":props="defaultProps":filter-node-method="filterNode"ref="tree"></el-tree><script>export default {watch: {filterText(val) {this.$refs.tree.filter(val);}},methods: {filterNode(value, data) {if (!value) return true;if (data.label.indexOf(value) !== -1) return true;// 匹配小写let arr = data.label.spell('low', 'array');let spell = arr.join('');let lengths = [0];for (var i = 0; i < arr.length - 1; i++) {lengths.push(lengths[i] + arr[i].length);};//判断label完整拼音 中 输入值的 index 是不是等于某个汉字第一个拼音字母的index值if(lengths.indexOf(spell.indexOf(value)) !== -1) return true// 大写let arrUp = data.label.spell('up', 'array');let spellUp = arrUp.join('');let lengthsUp = [0];for (var i = 0; i < arrUp.length - 1; i++) {lengthsUp.push(lengthsUp[i] + arrUp[i].length);};return lengthsUp.indexOf(spellUp.indexOf(value)) !== -1;}},data() {return {filterText: '',data: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。