效果圖:

image.png

html:

<template>
<!-- 搜索框 -->
  <div class="searchBox">
      <div class="inp"><input v-model="keyword" type="text" placeholder="關(guān)鍵詞"></div>
      <img v-if="showCloseBtn" src="../../../../static/img/icons/shanchu.png" class="closeLogo" @click="cleanKeyword" alt="">
      <span @click="findEvent">搜索</span>
  </div>

<!-- 展示 -->
  <div class="clue-box" v-for="(item, index) in list" :key="index">
     <div class="clue-item">
        <div class="text-line-up">
          <div class="company-name"  v-html="item.companyName"></div>
          <div v-if="item.needCut" class="shenglv">...</div>
        </div>
        <div class="text-line-down">
          <div class="contractNo">合同編號：{{item.code}}</div>
          <div class="times">{{item.date}}</div>
        </div>
     </div>
  </div>
</template>

數(shù)據(jù)處理:

const para = {
    id: '20181123001', 
    keyword: '',
    pageNum: 1
}
wx.request({
    url: `xxx`,
    data: para,
    method: 'POST'
}).then( res => {
    console.log(res) // 每個項目返回的數(shù)據(jù)結(jié)構(gòu)不一樣. 自己找到要處理的數(shù)據(jù)
    // 假設(shè) res.data.result 是我要處理的對象組
    if (res.data.result.length !== 0 && this.keyword) { // 帶搜索才進(jìn)行數(shù)據(jù)處理
        res.data.data.result.map((item, index) => {
            const re = new RegExp(this.keyword)
            let newString = ''
            let newname = ''
            // 適配
            if (re.test(item.companyName)) {
              newString = `<span style="color: #FF8C00">${this.keyword}</span>`
              newname = item.companyName.replace(this.keyword, newString)
              item.companyName = newname
            }
        })
    }
})

e.g. keyword 為A, 如果后臺返回的數(shù)據(jù)包括帶有a的話. 再增加一個正則 const re = new RegExp(this.keyword, 'i')

因?yàn)殇秩镜氖莢-html. 富文本. 所有css上設(shè)置的超過的部分為省略號的功能是實(shí)現(xiàn)不了的. 如果需要. 根據(jù)顯示數(shù)據(jù)的長度進(jìn)行判斷,是否需要添加省略號... 給每條數(shù)據(jù)添加一個參數(shù), 用于判斷. 同時給放v-html的div設(shè)置一個最大寬度. 這個寬度 用em, 可以盡量避免字體只顯示一半的尷尬...可如果顯示的結(jié)果是中英文結(jié)合的話, 偶爾還是會有出現(xiàn)的....(如果有更好的處理辦法, 請告訴我!!)
參考代碼: <div v-if="item.needCut" class="shenglv">...</div>