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

最新推荐文章于 2023-12-15 18:29:47 发布

doublewhy317

最新推荐文章于 2023-12-15 18:29:47 发布

阅读量1.3k

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/qq_38451270/article/details/103988899

版权

Vue学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我实在不知道怎么用简单几个字的标题来描述这个问题了。。。
这么说吧，我想在左边输入框输入搜索内容（比如“小”），下面的表格实现按我输入内容匹配后的列项（得到只含“王小虎”的一项）。
在这里插入图片描述
这里使用了 Element组件。
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);
	}
}