element table 在表格外的input输入内容实时过滤搜索表格内容显示

最新推荐文章于 2025-07-01 10:18:16 发布

原创

最新推荐文章于 2025-07-01 10:18:16 发布 · 9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element #过滤搜索

<template>
  <div class="table">
    <div class="search-Box">
      <el-input   placeholder="请输入关键字" icon="search"  class="search"  v-model="search"></el-input>
    </div>
    <el-table  :data="tables" border style="width: 100%">
      <el-table-column  prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column   prop="address"  label="地址"></el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        search: '',  //搜索
        tableData: [
          { date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
          {date: '2016-05-04',name: '章小虎',address: '上海市普陀区金沙江路 1517 弄'},
          {date: '2016-05-01',name: '李小虎',address: '上海市普陀区金沙江路 1519 弄'},
        ]  //表格内容
      }
    },
    computed:{
      tables:function(){
        v