vue3模拟模糊搜索下拉框,无限滚动，处理大数据，切片加载，自己实现一个自定义vue3下拉框组件,

预览效果

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

<script setup lang="tsx">
import { ref, unref } from 'vue'
import { ElInput } from 'element-plus'
import { onMounted } from 'vue'
import { basePerson_list_page_Api } from '@/api/common'
import { debounce } from 'lodash-es'
onMounted(() => {})
 
// 无限滚动
const searchpRpos = ref({
  input3: '',
  radio_data: '1',
  startAnEndDate: [],
  studentJobCode: ''
})
import { computed } from 'vue'
 
const count = ref(20)
const loading = ref(false)
const loading_view = ref(false)
const noMore = computed(() => count.value < 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  if (disabled.value) {
    console.log('没有更多数据')
    return
  }
  loading.value = true
  setTimeout(() => {
    currentPage.value += 1
    searchTable()
    loading.value = false
  }, 2000)
}
const showList = ref(false)
const onfocusHandle = (e) => {
  if (e.target.value) {
    dataList.value = []
    currentPage.value = 1
    searchData.value = searchpRpos.value.studentJobCode || e.target.value
    searchTable()
    showList.value = true
  }
}
const searchData = ref('')
const msg = ref('')
const resizeHandler = debounce(() => {
  searchTable()
}, 1000)
const onchangeHandle = (e) => {
  searchData.value = e
 
  if (e) {
    searchpRpos.value.studentJobCode = ''
    dataList.value = []
    currentPage.value = 1
    loading_view.value = true
    if (e.length >= 2) {
      resizeHandler()
      showList.value = true
      msg.value = ''
    } else {
      msg.value = '请输入至少2个汉字/字符'
      showList.value = false
    }
  } else {
    dataList.value = []
    currentPage.value = 1
    searchpRpos.value.studentJobCode = ''
    showList.value = false
  }
  console.log(e, 'e')
}
const blurHandle = () => {
  currentPage.value = 1
  dataList.value = []
  searchData.value = ''
  msg.value = ''
  showList.value = false
}
const dataList = ref([])
const currentPage = ref(1)
const searchTable = async () => {
  if (!searchData.value || searchData.value.length < 2) {
    return
  }
  basePerson_list_page_Api({
    pageCurrent: unref(currentPage),
    pageSize: 20,
    search: searchData.value
  })
    .then((res) => {
      if (res && res.data) {
        count.value = res.data.records.length
        dataList.value.push(...res.data.records)
        let hash = {}
        dataList.value = dataList.value.reduce((prev, next) => {
          //去重
          hash[next.studentJobCode] ? '' : (hash[next.studentJobCode] = true && prev.push(next))
          return prev
        }, [])
      }
    })
    .finally(() => {
      loading_view.value = false
    })
}
const idyList2 = ref({
  '1': '学生',
  '2': '教职工',
  '3': '第三方人员'
})
//选择人员
const clickItem = (item) => {
  searchpRpos.value.studentJobCode = item.studentJobCode
  searchpRpos.value.input3 =
    item.name +
    '/' +
    item.studentJobCode +
    '/' +
    idyList2.value[item.personType] +
    '/' +
    item.orgName
  blurHandle()
  console.log(item, 'item')
}
// 关闭遮盖
const cancelPop = (event) => {
  let tp = document.querySelector('.infinite-list-wrapper')
  if (tp) {
    if (!tp.contains(event.target)) {
      showList.value = false
    }
  }
}
</script>
 
<template>
  <div class="page" @click="cancelPop($event)">
    <div style="width: 800px">
      <div
        style="color: #1d2129; width: auto; font-size: 14px; margin-bottom: 20px"
        class="flex items-end justify-end"
      >
        <b style="color: #000000; font-size: 32px">查人</b>
        <span style="color: #86909c; margin-left: 20%">说明：目前仅支持单个查找校内人员</span>
      </div>
      <ElInput
        v-model="searchpRpos.input3"
        size="large"
        style="border: 1px solid #165dff; border-radius: 6px; overflow: hidden; position: relative"
        placeholder="输入姓名、学工号、一卡通号、证件号进行精准查询"
        class="input-with-select"
        clearable
        @focus.prevent.stop="onfocusHandle"
        @input="onchangeHandle"
        @click.prevent.stop="() => {}"
      >
        <!-- @blur="blurHandle" -->
        <template #append> 查询 </template>
      </ElInput>
      <div v-show="msg" style="color: red">{{ msg }}</div>
      <ElScrollbar v-show="showList" style="height: 300px" class="infinite-list-wrapper">
        <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
          <li
            v-for="(i, index) in dataList"
            :key="index"
            class="list-item"
            :style="{ color: searchpRpos.studentJobCode === i.studentJobCode ? '#165dff' : '' }"
            @click.prevent.stop="clickItem(i)"
          >
            {{ i.name }}/{{ i.studentJobCode }}/{{ idyList2[i.personType] }}/{{ i.orgName }}
          </li>
        </ul>
        <p v-if="loading || loading_view" style="font-size: 13px; color: #86909c">Loading...</p>
        <p v-if="noMore" style="font-size: 13px; color: #86909c">没有数据了~</p>
      </ElScrollbar>
    </div>
  </div>
</template>
 
<style lang="less" scoped>
.el-button {
}
 
.page {
  width: auto;
  height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
  background-repeat: no-repeat;
  background-size: 100% 100%;
  :deep(.el-input-group__append) {
    background-color: #165dff;
    box-shadow: none;
  }
  .infinite-list-wrapper {
    height: 300px;
    width: 730px;
    text-align: center;
    position: absolute;
    z-index: 1;
    background-color: #fff;
  }
  .infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
  }
 
  .infinite-list-wrapper .list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: rgb(128, 128, 128);
    cursor: pointer;
  }
  .list-item:hover {
    color: #165dff;
  }
  .infinite-list-wrapper .list-item + .list-item {
    margin-top: 10px;
  }
}
</style>

<!--
 * @Author: 张俊辉 zhangjunhui@mangocosmos.com
 * @Date: 2024-11-15 17:29:04
 * @LastEditors: 张俊辉 zhangjunhui@mangocosmos.com
 * @LastEditTime: 2024-12-16 14:02:11
 * @FilePath: \behavioral-data-center2\src\views\statisticsAndAnalysis\searchForPeople.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { ref, unref } from 'vue'
import { ElInput } from 'element-plus'
import { onMounted } from 'vue'
import { basePerson_list_page_Api } from '@/api/common'
import { debounce } from 'lodash-es'
onMounted(() => {})

// 无限滚动
const searchpRpos = ref({
  input3: '',
  radio_data: '1',
  startAnEndDate: [],
  studentJobCode: ''
})
import { computed } from 'vue'

const count = ref(20)
const loading = ref(false)
const loading_view = ref(false)
const noMore = computed(() => count.value < 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
  if (disabled.value) {
    console.log('没有更多数据')
    return
  }
  loading.value = true
  setTimeout(() => {
    currentPage.value += 1
    searchTable()
    loading.value = false
  }, 2000)
}
const showList = ref(false)
const onfocusHandle = (e) => {
  if (e.target.value) {
    dataList.value = []
    currentPage.value = 1
    searchData.value = searchpRpos.value.studentJobCode || e.target.value
    searchTable()
    showList.value = true
  }
}
const searchData = ref('')
const msg = ref('')
const resizeHandler = debounce(() => {
  searchTable()
}, 1000)
const onchangeHandle = (e) => {
  searchData.value = e

  if (e) {
    searchpRpos.value.studentJobCode = ''
    dataList.value = []
    currentPage.value = 1
    loading_view.value = true
    if (e.length >= 2) {
      resizeHandler()
      showList.value = true
      msg.value = ''
    } else {
      msg.value = '请输入至少2个汉字/字符'
      showList.value = false
    }
  } else {
    dataList.value = []
    currentPage.value = 1
    searchpRpos.value.studentJobCode = ''
    showList.value = false
  }
  console.log(e, 'e')
}
const blurHandle = () => {
  currentPage.value = 1
  dataList.value = []
  searchData.value = ''
  msg.value = ''
  showList.value = false
}
const dataList = ref([])
const currentPage = ref(1)
const searchTable = async () => {
  if (!searchData.value || searchData.value.length < 2) {
    return
  }
  basePerson_list_page_Api({
    pageCurrent: unref(currentPage),
    pageSize: 20,
    search: searchData.value
  })
    .then((res) => {
      if (res && res.data) {
        count.value = res.data.records.length
        dataList.value.push(...res.data.records)
        let hash = {}
        dataList.value = dataList.value.reduce((prev, next) => {
          //去重
          hash[next.studentJobCode] ? '' : (hash[next.studentJobCode] = true && prev.push(next))
          return prev
        }, [])
      }
    })
    .finally(() => {
      loading_view.value = false
    })
}
const idyList2 = ref({
  '1': '学生',
  '2': '教职工',
  '3': '第三方人员'
})
//选择人员
const clickItem = (item) => {
  searchpRpos.value.studentJobCode = item.studentJobCode
  searchpRpos.value.input3 =
    item.name +
    '/' +
    item.studentJobCode +
    '/' +
    idyList2.value[item.personType] +
    '/' +
    item.orgName
  blurHandle()
  console.log(item, 'item')
}
// 关闭遮盖
const cancelPop = (event) => {
  let tp = document.querySelector('.infinite-list-wrapper')
  if (tp) {
    if (!tp.contains(event.target)) {
      showList.value = false
    }
  }
}
</script>

<template>
  <div class="page" @click="cancelPop($event)">
    <div style="width: 800px">
      <div
        style="color: #1d2129; width: auto; font-size: 14px; margin-bottom: 20px"
        class="flex items-end justify-end"
      >
        <b style="color: #000000; font-size: 32px">查人</b>
        <span style="color: #86909c; margin-left: 20%">说明：目前仅支持单个查找校内人员</span>
      </div>
      <ElInput
        v-model="searchpRpos.input3"
        size="large"
        style="border: 1px solid #165dff; border-radius: 6px; overflow: hidden; position: relative"
        placeholder="输入姓名、学工号、一卡通号、证件号进行精准查询"
        class="input-with-select"
        clearable
        @focus.prevent.stop="onfocusHandle"
        @input="onchangeHandle"
        @click.prevent.stop="() => {}"
      >
        <!-- @blur="blurHandle" -->
        <template #append> 查询 </template>
      </ElInput>
      <div v-show="msg" style="color: red">{{ msg }}</div>
      <ElScrollbar v-show="showList" style="height: 300px" class="infinite-list-wrapper">
        <ul v-infinite-scroll="load" class="list" :infinite-scroll-disabled="disabled">
          <li
            v-for="(i, index) in dataList"
            :key="index"
            class="list-item"
            :style="{ color: searchpRpos.studentJobCode === i.studentJobCode ? '#165dff' : '' }"
            @click.prevent.stop="clickItem(i)"
          >
            {{ i.name }}/{{ i.studentJobCode }}/{{ idyList2[i.personType] }}/{{ i.orgName }}
          </li>
        </ul>
        <p v-if="loading || loading_view" style="font-size: 13px; color: #86909c">Loading...</p>
        <p v-if="noMore" style="font-size: 13px; color: #86909c">没有数据了~</p>
      </ElScrollbar>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-button {
}

.page {
  width: auto;
  height: 86vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-repeat: no-repeat;
  background-size: 100% 100%;
  :deep(.el-input-group__append) {
    background-color: #165dff;
    box-shadow: none;
  }
  .infinite-list-wrapper {
    height: 300px;
    width: 730px;
    text-align: center;
    position: absolute;
    z-index: 1;
    background-color: #fff;
  }
  .infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
  }

  .infinite-list-wrapper .list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    color: rgb(128, 128, 128);
    cursor: pointer;
  }
  .list-item:hover {
    color: #165dff;
  }
  .infinite-list-wrapper .list-item + .list-item {
    margin-top: 10px;
  }
}
</style>