Vue + element implements table filtering

install Vue and el I won't say anything , Also roast style ugly , The author is too lazy to write style mainly to show the writing method and function, although I want to roast about it myself

<template>
  <div style="margin-top: 150px;">
   <div>Vue Table filtering </div>
<el-row :gutter="20" style="margin-bottom:35px;" type="flex" justify="space-between">

  <el-col :span="8">
    <el-input placeholder=" Please enter a name " v-model="input1" class="input-with-select"  @change="getvalue1">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </el-col>
  <el-col :span="8">
    <el-input placeholder=" Please enter the province " v-model="input2" class="input-with-select" @change="getvalue2">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </el-col>
  <el-col :span="8">
    <el-input placeholder=" Please enter email address " v-model="input3" class="input-with-select" @change="getvalue3">
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
  </el-col>
</el-row>
<el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label=" date "
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label=" full name "
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label=" Province "
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label=" The city "
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label=" Address "
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label=" Zip code "
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label=" operation "
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small"> Delete </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  import {
    min} from '../min.js'
  export default {
    
    name: 'app_download',
    mixins: [min],
    data() {
    
      return {
    
          input1: '',
            input2: '',
         input3: '',
         tableData: [{
    
                  date: '2016-05-02',
                  name: ' X.h. ',
                  province: ' Haojing ',
                  city: ' Putuo District ',
                  address: ' 1518  get ',
                  zip: 5435
                }, {
    
                  date: '2016-05-04',
                  name: ' Wang lei ',
                  province: ' tianjin ',
                  city: ' Putuo District ',
                  address: ' Putuo District, Shanghai 3432432 Jinshajiang Road  1517  get ',
                  zip: 200213333
                }, {
    
                  date: '2016-05-01',
                  name: ' Wang dada ',
                  province: ' Beijing ',
                  city: ' Putuo District ',
                  address: ' Shanghai Pu 34324 Jinshajiang Road, Tuo District  1519  get ',
                  zip: 2132
                }, {
    
                  date: '2016-05-03',
                  name: ' Faye Wong ',
                  province: ' nanjing ',
                  city: ' Putuo District ',
                  address: ' Putuo District, Shanghai 242433 Jinshajiang Road  1516  get ',
                  zip: 213
                }]
      }
    },
    methods: {
    
      getvalue1(){
    
        const data=this.tableData
          data.forEach((item,index)=>{
    
             if(item.name==this.input1){
    
               this.tableData=data.splice(index,1)
             }
        })
        this.input1=''
      },
      getvalue2(){
    
        const data=this.tableData
          data.forEach((item,index)=>{
    
             if(item.province==this.input2){
    
               this.tableData=data.splice(index,1)
             }
        })
        this.input2=''
      },
      getvalue3(){
    
        const data=this.tableData
          data.forEach((item,index)=>{
    
             if(item.zip==this.input3){
    
               this.tableData=data.splice(index,1)
             }
        })
        this.input3=''
      },
         handleClick(row) {
    
              console.log(row);
            }
    },
    created() {
    
        console.log(min)
    },
    mounted() {
    },
  }
</script>