Vue计算属性computed得到按输入内容过滤的表格

我实在不知道怎么用简单几个字的标题来描述这个问题了。。。 这么说吧，我想在左边输入框输入搜索内容（比如“小”），下面的表格实现按我输入内容匹配后的列项（得到只含“王小虎”的一项）。 这里使用了 。 HTML块：

<el-table :data="filterData" style="width: 100%">
	<el-table-column type="index" :index="indexMethod"></el-table-column>
	<el-table-column prop="name" label="姓名"></el-table-column>
	<el-table-column prop="option" label="操作" min-width="200" align="right">
		<template slot-scope="scope">
			<el-button
				size="mini"
				type="danger"
				@click="handleDelete(scope.$index, tableData)">删除</el-button>
        </template>
	</el-table-column>
</el-table>

Js块：

data() {
          
   
    return {
          
   
      inputSearch: "",
      inputPlus:"",
      tableData: [
        {
          
   
            name: 王小虎
        },
        {
          
   
            name: 王二虎
        },
        {
          
   
            name: 王三虎
        },
        {
          
   
            name: 王四虎
        },
        {
          
   
            name: 王五虎
        },
        {
          
   
            name: 王六虎
        }
        ],
	}
},
computed: {
          
   
	filterData() {
          
   
        if(this.inputSearch.trim()) {
          
    //去掉收尾空格，还存在搜索内容
			let reg = new RegExp(this.inputSearch.trim());
			return this.tableData.filter(item => reg.test(item.name))
        }
        return this.tableData
	}
},
methods:{
          
   
	add(){
          
   
        this.tableData.push({
          
   name: this.inputPlus});
	},
	handleDelete(index,rows){
          
   
        rows.splice(index, 1);
	}
}

让表格绑定了filterData，再在计算属性中得到按照正则对象匹配成功后的计算值，这样就能实现这个问题。。。 再次理解计算属性…学习之中记录点滴…