如何实现输入框和表格的联动，实现输入框输入内容查询表格数据？

ui:

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/searchone' }">查询数据</el-breadcrumb-item>
      <el-breadcrumb-item>查询数据表1</el-breadcrumb-item>
      <el-breadcrumb-item>查询数据表2</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入查询内容" v-model="inputContent" type="text">
            <el-button slot="append" icon="el-icon-search" @click="searchinput"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-table :data="allData" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop"
          :label="item.label"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

js

<script>
export default {
  data () {
    return {
      inputContent: '',
      searchContent: '',
      allData: [],
      columnList: []
    }
  },
  created () {
    this.getAllData()
    this.getColumnList()
  },
  computed: {
    tables () {
      const search = this.searchContent
      if (this.inputContent === '') {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.searchContent = ''
        return this.allData
      }
      if (search !== '') {
        // eslint-disable-next-line no-return-assign
        return [this.allData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        }),
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.count = this.allData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(search) > -1
          })
        }).length]
      }
      return this.allData
    }
  },
  methods: {
    getAllData () {
      // const { data: res } = await this.$http.get('')
      const data = [
        { name: '11', age: '11', city: '11' },
        { name: '12', age: '12', city: '12' },
        { name: '13', age: '13', city: '13' },
        { name: '14', age: '14', city: '14' },
        { name: '15', age: '15', city: '15' },
        { name: '16', age: '16', city: '16' }
      ]
      this.allData = data
    },
    getColumnList () {
      const prop = [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'city', label: '城市' }
      ]
      this.columnList = prop
    },
    // 只要点击搜索框，那么输入框里面的值inputContent就会传给searchContent，这是为了防止当输入框输入值后自动搜索
    searchinput () {
      this.searchContent = this.inputContent
      console.log(this.searchContent)
    }
  }
}
</script>

哪里出问题了，没实现效果