SOURCE

var Main = {
    data() {
      return {
         //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: {
    //搜索病历信息
    //每次改变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="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>
      </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;
}