vue实现中根据字母或者中文进行排序

需求描述：对获取的敏感词进行首字母排序

效果图：

 

实现思路：

第一步：安装js-pinyin，better-scroll，并且在页面中引入import pinyin from 'js-pinyin'，import BScroll from 'better-scroll'

第二步：代码实现 

注意点：js-pinyin对出来汉字，字母之外的都无效，所以要加一个“#”，不符合条件的词语都放到“#”

<template>
  <div class="mt15">
    <div class="checkitem">
      <el-checkbox @change="getMoredata" v-model="checked1"></el-checkbox>
      <div class="info">
        <div>启用敏感词过滤功能</div>
        <span class="spanp">启用敏感词过滤功能，将有效过滤屏蔽网页中不符合安全的文本，如涉黄赌毒‘反动言论等</span>
      </div>
    </div>
    <div class="checkitem" v-show="checked1">
      <el-checkbox style="visibility: hidden;"></el-checkbox>
      <div class="info">
        <div>敏感词词典</div>
        <span class="spanp">针对要屏蔽过滤的网页关键词进行定义，将进行脱敏模糊化处理。</span>
        <div style="margin-bottom:15px;margin-top:15px">
          <el-button size="mini" @click="addWord" plain>
            <i class="el-icon-plus"></i>
          </el-button>
          <el-button :loading="delload" size="mini" @click="delword" plain>
            <i class="el-icon-minus"></i>
          </el-button>
        </div>
        <div class="searchword" v-loading="loading">
            <div class="keywordcon" ref="wrappercon">
                <el-checkbox-group v-model="checkword"  class="bscroll-container">
                    <div :ref="index" :key="index" v-for="(item, index) of wordtrueArr">
                        <el-checkbox :label="item2.id" :key="index2" v-for="(item2,index2) in item">{{item2.content}}</el-checkbox>
                    </div>
                </el-checkbox-group>
            </div>
            <div class="noscroll">
                <div class="letter">
                    <span :class="{wordactive:cur==index}" @click="toWord(item,index)" v-for="(item,index) in lettersArr" :key="index">
                        {{item}}
                    </span>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div>
      <el-button size="small">取消</el-button>
      <el-button type="primary" size="small" :loading="addload" @click="saveData">保存</el-button>
    </div>
    <SensWord v-if="SensWord" key="01"  ref="sensword" @refreshDataList="getDataList"></SensWord>
  </div>
</template>
<script>
import pinyin from 'js-pinyin'
import BScroll from 'better-scroll'
import SensWord from './addsensword'
export default {
  data() {
    return {
      loading:false,
      checked1: '',
      delload:false,addload:false,
      checkword:[],
      aBScroll:'',
      wordtrueArr:[],
      cur:0,
      clickword:'',
      SensWord:false,
      ids:"",
      wordArr:[],
      lettersArr:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']
    };
  },
  components:{SensWord},
  mounted(){
    if(this.checked1==true){
      this.getDataList()
    }
    this.getSystemInfo()
      this.$nextTick(() => {         
        let bscrollDom = this.$refs.wrappercon;
        this.aBScroll = new BScroll(bscrollDom,{
            scrollY: true,
            click: true,
            mouseWheel: {
                speed: 20,
                invert: false,
                easeTime: 300
            }
        })
     this.aBScroll.on('scroll', (pos) => {
        
        }) 
     })  
  },
  destroyed(){
      this.aBScroll.destroy()
  },
  methods:{
    getMoredata(){
      if(this.checked1==true){
      this.getDataList()
    }
    },
    //添加敏感词
      addWord(){
        this.SensWord = true;
        this.$nextTick(() => {
          this.$refs.sensword.init();
        });
      },
      //删除敏感词
      delword(){
      let _this = this
      let idArrs = this.checkword;
      if (this.checkword == 0) {
        this.$notify({
          message: "至少选择一项",
          type: "warning",
          duration: 1500
        });
      } else {
        this.delload = true
      this.$http({
        url: this.$http.adornUrl("/wad/sensitiveword/batchremove"),
        method: "post",
        headers: this.$http.addReq("form"),
        data: this.$http.adornData(
          {
            words:idArrs.toString()
          },true,"form")
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$notify({
            message: "删除成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              _this.getDataList();
              _this.checkword=[];
              _this.delload = false
            }
          });
        } else {
          this.$notify.error(data.msg);
        }
      });
      }
    },
    //获取敏感词列表
      getDataList(){
        this.loading = true
        let _this=this
        this.$http({
          url: this.$http.adornUrl("/wad/sensitiveword/list"),
          method: "get",
          params: this.$http.adornParams({
          })
        }).then(({ data }) => {
          if(data.code==0&&data.msg=="success"){
           
            this.wordArr=data.data
            setTimeout(function(){
              _this.getFirstPin();
            },200)
          }
        })
        .catch(() => {
        });
      },
      //点击字母跳转
      toWord(word,i){
          this.cur = i
          this.clickword = word;
          const ele = this.$refs[word][0];
          this.aBScroll.scrollToElement(ele)
      },
              //新增
    saveData() {
      this.addload = true;
      let that = this
      this.$http({
        url: that.$http.adornUrl("/wad/config/update"),
          method: "post",
          data: that.$http.adornData({
            sensitiveWordFeature: that.checked1 == true ? 1 : 0,
            id: that.ids
          })
      }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.addload = false;
                this.getSystemInfo()
              }
            });
            
          } else {
            this.addload = false;
            this.$notify.error(data.msg);
          }
        })
        .catch(() => {});
    },
        //查看系统配置
    getSystemInfo(){
       this.$http({
        url: this.$http.adornUrl("/wad/config/get"),
        method: "get",
        params: this.$http.adornParams({
        })
      })
        .then(({ data }) => {
          this.checked1 = data.data.sensitiveWordFeature==0?false:true
          this.ids = data.data.id
        })
        .catch(() => {
          
        });
    },
      getFirstPin(){
        pinyin.setOptions({checkPolyphone: false, charCase: 0});
        let wordArrs = this.wordArr;
        let newArrs = [];
        let _this = this;
        for(let i = 0;i<wordArrs.length;i++){
            //获取每条数据里的名称
            let wordName = wordArrs[i].content;
            //获取所有名称的首字母，并且大写
            let fristName = pinyin.getCamelChars(wordName).substring(0, 1).toUpperCase();
            //进行判断，给原始json数据添加新的键值对
            if(this.lettersArr.includes(fristName)==true){
              
            wordArrs[i].first = fristName;
            }else{
              wordArrs[i].first = "#"
            }
            //放入新的数组中
            newArrs.push(wordArrs[i])
        }
        let wordJson = {};
        for(let i = 0;i<_this.lettersArr.length;i++){
            wordJson[_this.lettersArr[i]] = newArrs.filter(function(value){
                return value.first === _this.lettersArr[i]
            })
        }
        _this.wordtrueArr = wordJson
         this.loading = false
      }
  }
  };
</script>

 最后获取的数据结构