ZBLOG

要实现当你选择 v-for 下拉的标签时,使 placeholder 显示为选中的内容,并且取消显示 v-for 标签,可以按照以下步骤进行修改:

  1. 在数据中增加一个变量来存储当前选中的电池编号。
  2. 当用户点击某个项目时,更新这个变量并清空列表。

以下是修改后的代码示例:

  1. <template>
  2. <uni-easyinput
  3. :placeholder="selectedBatteryNo || '请输入搜索内容'"
  4. prefixIcon="search"
  5. v-model="inputValue"
  6. @iconClick="iconClick"
  7. @input="input"
  8. class="search-bar uni-search-bar">
  9. </uni-easyinput>
  10. <!-- 如果没有选择项目,就显示过滤后的列表 -->
  11. <view v-if="!selectedBatteryNo" v-for="(item, index) in filteredList" :key="index" :class="item.show ? 'items' : ''" class="view-for"
  12. @click="viewData(item)">
  13. {{ item.batteryNo }}
  14. <text v-if="item.factory == 1" style="color: green; margin-left: 20px; font-weight: bold;">(60S 原厂)</text>
  15. <text v-if="item.factory == 2" style="color: green; margin-left: 20px; font-weight: bold;">(80V 原厂)</text>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. inputValue: '',
  23. selectedBatteryNo: '', // 用于存储选中的电池编号
  24. actarr: [],
  25. batteryData: [], // 假设这是你的电池数据
  26. };
  27. },
  28. computed: {
  29. // 根据搜索文本过滤数据列表
  30. filteredList() {
  31. let arr = this.batteryData.filter(item => item.batteryNo.includes(this.inputValue));
  32. console.log('arr=', arr);
  33. return arr;
  34. }
  35. },
  36. methods: {
  37. viewData(item) {
  38. if (this.actarr.includes(item.batteryNo)) {
  39. const index = this.actarr.indexOf(item.batteryNo);
  40. this.actarr.splice(index, 1);
  41. item.show = false; // 隐藏已选择的项
  42. this.selectedBatteryNo = ''; // 清空选中状态
  43. this.inputValue = ''; // 清空输入框内容
  44. } else {
  45. this.actarr.push(item.batteryNo);
  46. item.show = true;
  47. // 更新选中电池编号并清空其他项
  48. this.selectedBatteryNo = item.batteryNo;
  49. // 可选择清空输入框,以避免后续输入影响结果。
  50. this.inputValue = '';
  51. }
  52. console.log(this.actarr, '当前选中的数组');
  53. },
  54. input(res) {
  55. this.inputValue = res;
  56. console.log('inputValue:', this.inputValue);
  57. // 当有输入时,清除选中的电池编号,使其可以重新搜索和选择其他内容。
  58. if (res) {
  59. this.selectedBatteryNo = '';
  60. }
  61. },
  62. iconClick() {
  63. // 图标点击事件处理逻辑(如需要)
  64. }
  65. }
  66. </script>
  67. <style scoped>
  68. /* 添加相关样式 */
  69. </style>

修改说明:

  • 新增selectedBatteryNo:用于保存当前选中的电池编号。
  • viewData 方法中:更新 selectedBatteryNo 的值以显示在 placeholder 中,并在点击时隐藏下拉项。
  • 更新filteredList渲染条件:仅当没有选中项目时才显示过滤后的列表。这样,当用户选择一项后,下拉项会消失,仅展示所选内容。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19143

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?