xiangan_pc/src/components/patient-view/detail/_del_component.vue

<template>
  <el-input
    v-model="searchKeyWord"
    class="header-search"
    size="mini"
    placeholder="关键词"
    @keyup.enter.native="searchNext"
  >
    <span slot="suffix" class="search-result">
      {{ ((searchIndex==-1)?0:(searchIndex+1))+'/'+searchResult.length }}
    </span>
    <i slot="suffix" class="el-input__icon el-icon-arrow-down" title="下一个" @click="searchNext" />
    <i slot="suffix" class="el-input__icon el-icon-arrow-up" title="上一个" @click="searchLast" />
    <i slot="suffix" class="el-input__icon el-icon-refresh" title="重置" @click="searchReset" />
  </el-input>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'

export default {
  props: {
    value: { type: Array, default: () => [] }
  },
  data() {
    return {
      dataList: [],
      dataListTemp: [],
      searchKeyWord: '',
      searchIndex: -1,
      searchResult: []
    }
  },
  watch: {
    searchKeyWord(val) {
      if (val) {
        this.searchHandle()
      }
    },
    value(val) {
    //   this.dataListTemp = val
    }
  },
  methods: {
    searchLast() {
      if (this.searchResult.length > 0) {
        if (this.searchIndex > 0) {
          this.searchIndex--
        } else {
          this.searchIndex = this.searchResult.length - 1
        }
        this.searchIndexDisplay()
      } else {
        this.searchIndex = -1
      }
    },
    searchNext() {
      if (this.searchResult.length > 0) {
        if (this.searchIndex + 1 < this.searchResult.length) {
          this.searchIndex++
        } else if (this.searchIndex + 1 >= this.searchResult.length) {
          this.searchIndex = 0
        }
        this.searchIndexDisplay()
      } else {
        this.searchIndex = -1
      }
    },
    searchReset() {
      this.searchIndex = -1
      this.searchKeyWord = ''
      this.searchResult = []
      this.dataList = cloneDeep(this.dataListTemp)
    },
    searchIndexDisplay() {
      if (this.searchIndex >= 0 && this.searchResult.length > 0) {
        const index = this.searchResult[this.searchIndex]
        // this.$refs.dataList.toggleRowExpansion(this.dataList[index], true)
        // this.setCurrentRow(index)
        this.$emit('focusResult', index)
      }
    },
    searchHandle() {
      if (!this.searchKeyWord) { return false }
      this.searchIndex = -1
      this.searchResult = []
      this.dataList = cloneDeep(this.dataListTemp)

      const regex = new RegExp(this.searchKeyWord, 'g')
      let rowCount = 0
      this.dataList.forEach((item1, rowIndex1) => {
        const data = item1.data
        let isFlag = false
        if (data && data.length > 0) {
          data.forEach((item2, rowIndex2) => {
            // 遍历行对象
            Object.keys(item2).forEach(key => {
              if (item2[key] && item2[key].toString().includes(this.searchKeyWord)) {
                isFlag = true
                // 关键词标记
                item2[key] = item2[key].toString().replace(regex, `<span style='color:red;'>${this.searchKeyWord}</span>`)
              }
            })
          })
        }
        if (isFlag) {
          // 记录数据位置
          this.searchResult[rowCount] = rowIndex1
          rowCount++
        }
      })
      this.$emit('input', this.dataList)

    //   this.$emit('update:queryItem', queryItem)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-search {
  width: 300px;
}
::v-deep .el-input__suffix {
  display: flex;
  align-items: center;

  .el-input__suffix-inner {
    .search-result {
      display: inline-block;
      padding: 0 10px;
      border-right: 1px solid #c0c4cc;
    }

    .el-input__icon {
      cursor: pointer;
      width: 20px;
      border-radius: 20px;
      line-height: 20px;
      margin: 4px 2px;
    }

    .el-input__icon:hover {
      background: #c0c4cc;
      color: #fff;
    }
  }
}
</style>