elementUI的表格搜索和删除功能的实现

1、搜索可以模糊搜索关键字
2、删除可以删除表格这条数据
3、搜索后可以删除表格数据并清空搜索时展示删除后的数据

具体效果可以复制如下代码查看效果；

<template><div class="content-box"><div class="container"><div style="display: flex"><el-inputv-model="inputText"placeholder="请输入内容"style="width: 250px"></el-input><el-button type="primary" @click="search">主要按钮</el-button></div><el-table:data="tableList"style="width: 100%; margin-bottom: 20px"row-key="id"borderdefault-expand-all:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column type="selection" width="55"></el-table-column><el-table-columnprop="name"label="区域名称"width="180"></el-table-column><el-table-columnprop="date"label="创建时间"width="180"></el-table-column><el-table-column label="操作管理"><template slot-scope="scope"><el-buttonsize="mini"type="danger"@click="handleDele(scope.row)">删除</el-button></template></el-table-column></el-table></div></div>
</template><script>
export default {data() {return {tableData: [{id: 1,date: "2016-05-02",name: "篮球",address: "上海市普陀区金沙江路 1518 弄",isDelete:false},{id: 2,date: "2016-05-04",name: "读书1",address: "上海市普陀区金沙江路 1517 弄",isDelete:false},{id: 3,date: "2016-05-01",name: "编程",address: "上海市普陀区金沙江路 1519 弄",isDelete:false},{id: 4,date: "2016-05-03",name: "弹琴",address: "上海市普陀区金沙江路 1516 弄",isDelete:false},{id: 5,date: "2016-05-03",name: "读书2",address: "上海市普陀区金沙江路 1516 弄",isDelete:false},{id: 6,date: "2016-05-03",name: "插画",address: "上海市普陀区金沙江路 1516 弄",isDelete:false},],tableList: [],searchlist: [],inputText: "",};},created() {this.setSlist(this.tableData);},methods: {// 获取需要渲染到页面中的数据setSlist(arr) {this.tableList = JSON.parse(JSON.stringify(arr));},search() {if (this.inputText) {var slist = [];// 过滤需要的数据this.tableData.forEach((item) => {// 检测搜索关键字 和 判断是否删除的数据if (item.name.indexOf(this.inputText) > -1 && !item.isDelete) {slist.push(item);} else if(!item.isDelete){this.searchlist.push(item)}});this.setSlist(slist); // 将过滤后的数据给了tableList } else {// 没有搜索内容，则展示全部数据 但是要判断是否删除的数据this.searchlist = []this.tableData.forEach((item) => {if(!item.isDelete){this.searchlist.push(item)this.setSlist(this.searchlist)}})}},handleDele(row) {this.tableList.forEach((element, i) => {console.log(this.tableData, this.tableList);if (element.id == row.id) {if(this.tableData.length == 1){return this.$message.warning('至少保留一个参与对象')}if(this.tableData.filter(elm => !elm.isDelete).length == 1){return this.$message.warning('至少保留一个参与对象')}this.tableData.forEach((elm) => {if(elm.id == row.id){elm.isDelete = true}})this.tableList.splice(i, 1);}});this.setSlist(this.tableList);}},
};
</script><style lang="scss" scoped>
</style>

elementUI的表格搜索和删除功能的实现相关推荐

vue使用elementui实现表格中上下移动功能
html代码 <el-table :data="prodata"><el-table-column align="center" label= ...
elementui带输入建议查询_elementUi简单实现搜索提词功能
上周又又又又加需求了,好吧,bring it on 先讲需求目标要实现功能 focus的时候要出历史搜索(要存缓存) 历史搜索下部出现清除缓存按钮 input的时候要根据后台返回出提词 element ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
帝国Cms百度小程序自然搜索之资源删除功能的使用
在小程序开发测试阶段,难免会产生一些不可用或者低质的资源,这样在接入百度的自然搜索的时候,一般会遇到如下内容. 具体页面内容如下下面要做的,就是我们要将这些低质,空链资源删除掉,百度小程序后台给我们 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
SAP UI5 应用开发教程之六十六 - 基于 OData V4 的 SAP UI5 表格控件如何实现删除功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
使用layui做数据表格使用下拉菜单并实现删除功能和时间选择器
一.再layui官网上查看数据表格的使用方式查看代码实例不使用 toolbar工具栏,分页功能之类的就不在创建渲染实例的声明二.根据你要完成表格设计稿完成数据表格中使用下拉菜单和时间选择器以图 ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
element表格图片放大_vue中element-ui表格缩略图悬浮放大功能的实例代码
element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图 ...

elementUI的表格搜索和删除功能的实现

elementUI的表格搜索和删除功能的实现

elementUI的表格搜索和删除功能的实现相关推荐

最新文章

热门文章