SOURCE

var Main = {
    data() {
      return {
         searchValue: '',
      dropdownShow: true,
      options: [
        { text: '选项1', value: 'option1' },
        { text: '选项2', value: 'option2' },
        { text: '选项3', value: 'option3' },
        // 更多选项...
      ],
      selectedOption: 111,
      selectedOptionText: '选择一个选项',
         //v-model 到搜索框
     myTableData: [{
            date: '2016-05-02',
            name: '王小ww虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小e虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小er虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小4虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
      fakeData: [],
      searchVal: "",



      };
    },
   
created() {
    for (let i = 0; i < this.myTableData.length; i++) {
      this.fakeData[i] = this.myTableData[i];
    }
  },
 
methods: {
     handleSearch(value) {
      // 处理搜索事件
      if (this.selectedOption) {
        // 如果选择了下拉选项，搜索时可以携带选项信息
        console.log('搜索内容:', value, '选项:', this.selectedOption);
      } else {
        console.log('搜索内容:', value);
      }
    },
    handleDropdownChange(option) {
      // 处理下拉菜单选项变化事件
      this.selectedOption = option.value;
      this.selectedOptionText = option.text;
      this.dropdownShow = false;
    },
    //搜索病历信息
    //每次改变input框值时就改变this.myTableData的值
    inputChange() { //循环每一项 只要content的值含有输入的searchVal值，就加进newList；反之，就无东西加进newList
      let newlist = this.fakeData.filter(
        (item) => item.name.indexOf(this.searchVal) > -1 ||
        item.address.indexOf(this.searchVal) > -1
      );
      this.myTableData = newlist;
    }
  }

//生命周期 - 创建完成（可以访问当前this实例）
    
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<div id="app">
<template>
<div class="search-dropdown-container">
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      placeholder="搜索或选择"
      @search="handleSearch"
      shape="round"
      show-action
    >
      <!-- 下拉菜单插槽 -->
      <template #action>
        <!-- 下拉选择菜单 -->
        <van-dropdown-menu
          v-model="dropdownShow"
          :options="options"
          @change="handleDropdownChange"
        >
          <!-- 自定义下拉菜单触发按钮 -->
          <div class="dropdown-trigger">
            <span>{{ selectedOptionText }}</span>
            <van-icon name="arrow-down" />
          </div>
        </van-dropdown-menu>
      </template>
    </van-search>
  </div>

 <div class="history-search">
        <span class="s-span">病历信息搜索 </span>
        <!-- 改变input框的值触发的事件 -->
        <el-input class="input-input" v-model="searchVal" @input="inputChange"
          ><i
            class="el-icon-search el-input__icon"
            slot="suffix"
          >
          </i>
        </el-input>
      <van-button type="primary">主要按钮</van-button>
      </div>
     <el-table
      :data="myTableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>


</template>

</div>

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

/* 自定义的icon 使用的是阿里的图标库 https://www.iconfont.cn/ */

@import url("//at.alicdn.com/t/font_3295968_rwmcgh4pbj.css");
.my-checkbox .el-checkbox__inner {
    /* 这里写未选中的样式*/
    font-family: "iconfont" !important;
    font-size: 14px;
    color: red;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.my-checkbox .el-checkbox__inner::after {
    /* 这里写未选中的样式*/
    content: "\e7ac";
    border: none;
    transform: none;
    left: 0;
    top: 0;
}

.my-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
    /* 这里写选中的样式*/
    content: "\ec9e";
    color: white;
    border: none;
    transform: none;
    left: 0;
    top: 0;
}

.my-checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
.my-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    font-size: 14px;
    /* 这里写选中的颜色*/
    background-color: blue;
    border-color: blue;








    .search-dropdown-container {
  padding: 10px;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* 确保下拉触发按钮的宽度与搜索框一致 */
.dropdown-trigger span {
  flex: 1;
}
}