利用 Vue 和 element 的实现table增、删、改表格数据的模糊匹配搜索

最新推荐文章于 2023-10-19 16:00:00 发布
最新推荐文章于 2023-10-19 16:00:00 发布
阅读量952 收藏 9
点赞数
分类专栏： vue 文章标签： vue table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38577700/article/details/103195551
版权

表格的删除

HTML代码

 <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

处理函数

/*表格删除功能*/
      handleDelete:function(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err
          })
        })
      },

表格的编辑

HTML代码

HTML代码和上面的删除一样，只是编辑功能在删除的基础上需要添加编辑的对话框，下面是对话框代码


>     <el-dialog
>       title="编辑"
>       :visible.sync="editFormVisible"//控制编辑窗口显示
>     >
>       <el-form
>         :model="editForm"
>         ref="editForm"
>       >
>         <el-form-item
>           label="姓名"
>           :label-width="formLabelWidth"
>         >
>           <el-input
>             v-model="editForm.name"
>             autocomplete="off"
>           ></el-input>
>         </el-form-item>
>         <el-form-item
>           label="生日"
>           :label-width="formLabelWidth"
>         >
>           <el-date-picker
>             v-model="editForm.date"
>             type="date"
>             placeholder="选择日期"
>             format="MM 月 dd 日"
>             value-format="MM-dd"
>           >
>           </el-date-picker>
>         </el-form-item>
>         <el-form-item
>           label="地址"
>           :label-width="formLabelWidth"
>         >
>           <el-input
>             type="textarea"
>             v-model="editForm.address"
>             autocomplete="off"
>           ></el-input>
>         </el-form-item>
>       </el-form>
>       <div>
>         <el-button @click="cancel()">取消</el-button>
>         <el-button
>           type="primary"
>           v-on:click="sumbitEditRow()"
>           :loading="addLoading"
>         >确定</el-button>
>       </div>
> 
>     </el-dialog>

处理函数

 //编辑数据
      handleEdit(index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        _index = index;//将编辑行数传给全局变量
      },
      //保存编辑
      sumbitEditRow() {
        var editData = _index;
        this.tableData[editData].name = this.editForm.name;
        this.tableData[editData].date = this.editForm.date;
        this.tableData[editData].address = this.editForm.address;
        this.editFormVisible = false;
      },
  • 注意要将编辑数据的序列号，传给全局变量
  • Object.assign() 第一个参数是目标对象，后面的都是源对象。 Object.assign (target, source1,source2, source3, …);如果想详细了解他的用法，请参考Object.assign

表格的新增

HTML代码

<el-col :span="17">
      <div class="table-grid-content">
        <el-button class="add"
                   type="primary"
                   @click="addRow()"
        >新增</el-button>
      </div>
    </el-col>
    
<!-- 新增窗口 -->
<el-dialog
  title="新增"
  :visible.sync="addFormVisible"
>
  <el-form
    :model="addForm"
    ref="addForm"
  >
    <el-form-item
      label="姓名"
      :label-width="formLabelWidth"
    >
      <el-input
        v-model="addForm.name"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="日期"
      :label-width="formLabelWidth"
    >
      <el-date-picker
        v-model="addForm.date"
        type="date"
        placeholder="选择日期"
        format="MM 月 dd 日"
        value-format="MM-dd"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item
      label="地址"
      :label-width="formLabelWidth"
    >
      <el-input
        type="textarea"
        v-model="addForm.address"
        autocomplete="off"
      ></el-input>
    </el-form-item>
  </el-form>
  <div>
    <el-button @click="cancel()">取消</el-button>
    <el-button
      type="primary"
      @click="sumbitAddRow()"
      :loading="addLoading"
    >确定</el-button>
  </div>

</el-dialog>

处理函数

 //新增数据
  addRow:function() {
    this.addFormVisible = true;
    this.addForm = {
      name: '',
      date: '',
      address: ''
    }
  },
  //将新增的数据添加到表格中
  sumbitAddRow: function () {
    this.tableData = this.tableData || []
    this.tableData.push({
      name: this.addForm.name,
      date: this.addForm.date,
      address: this.addForm.address,
    })
    this.addFormVisible = false
  },
  cancel: function () {
    this.addFormVisible = false;
    this.editFormVisible = false;
  },

表格的模糊查询

HTML代码

 <!--搜索栏-->
    <div class="search-wrap">
      <el-row>
        <el-col :span="1" class="grid label-search">
          <el-span type="success" icon="el-icon-search">搜索：</el-span>
        </el-col>
        <el-col :span="6" class="grid">
          <el-input v-model="search" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="17">
          <div class="table-grid-content">
            <el-button class="add"
                       type="primary"
                       @click="addRow()"
            >新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

处理函数

  computed: {
      // 模糊搜索
      tables () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.tableData.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    },

注意这里的代码不能放在方法函数里，这是一个计算属性

整个代码

<template>
  <div class="dormitory">
    <!--搜索栏-->
    <div class="search-wrap">
      <el-row>
        <el-col :span="1" class="grid label-search">
          <el-span type="success" icon="el-icon-search">搜索：</el-span>
        </el-col>
        <el-col :span="6" class="grid">
          <el-input v-model="search" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="17">
          <div class="table-grid-content">
            <el-button class="add"
                       type="primary"
                       @click="addRow()"
            >新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--表格-->
    <el-table
      :data="tables"
      ref="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"  border>
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增窗口 -->
    <el-dialog
      title="新增"
      :visible.sync="addFormVisible"
    >
      <el-form
        :model="addForm"
        ref="addForm"
      >
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="addForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="日期"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="addForm.date"
            type="date"
            placeholder="选择日期"
            format="MM 月 dd 日"
            value-format="MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="地址"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            v-model="addForm.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancel()">取消</el-button>
        <el-button
          type="primary"
          @click="sumbitAddRow()"
          :loading="addLoading"
        >确定</el-button>
      </div>

    </el-dialog>
    <!-- 编辑窗口 -->
    <el-dialog
      title="编辑"
      :visible.sync="editFormVisible"
    >
      <el-form
        :model="editForm"
        ref="editForm"
      >
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="editForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="生日"
          :label-width="formLabelWidth"
        >
          <el-date-picker
            v-model="editForm.date"
            type="date"
            placeholder="选择日期"
            format="MM 月 dd 日"
            value-format="MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="地址"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            v-model="editForm.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancel()">取消</el-button>
        <el-button
          type="primary"
          v-on:click="sumbitEditRow()"
          :loading="addLoading"
        >确定</el-button>
      </div>

    </el-dialog>
  </div>


</template>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .add{
    float: right;
  }
  .search-wrap{
    margin: 10px 40px;
  }
  .label-search{
    margin-top: 7px;
  }
</style>

<script>
  var _index;//定义全局变量
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 ',
        }, {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        formLabelWidth: '120px',
        addFormVisible: false,//是否显示新增窗口
        name:"tableList",
        addForm: [],
        addLoading: false,
        editFormVisible: false,//是否显示编辑窗口
        editForm: [],
        search: '',
      }
    },
    computed: {
      // 模糊搜索
      tables () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意： filter() 不会对空数组进行检测。
          // 注意： filter() 不会改变原始数组。
          return this.tableData.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素：
            // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素，则返回false。
            // 注意： some() 不会对空数组进行检测。
            // 注意： some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData
      }
    },
    methods: {
      tableRowClassName:function({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleEdit:function(index, row) {
        console.log(index, row);
      },
      /*表格删除功能*/
      handleDelete:function(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        }).catch(err => {
          this.$message({
            type: 'error',
            message: err
          })
        })
      },
      //新增数据
      addRow:function() {
        this.addFormVisible = true;
        this.addForm = {
          name: '',
          date: '',
          address: ''
        }
      },
      //将新增的数据添加到表格中
      sumbitAddRow: function () {
        this.tableData = this.tableData || []
        this.tableData.push({
          name: this.addForm.name,
          date: this.addForm.date,
          address: this.addForm.address,
        })
        this.addFormVisible = false
      },
      cancel: function () {
        this.addFormVisible = false;
        this.editFormVisible = false;
      },
      //编辑数据
      handleEdit(index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        _index = index;
      },
      //保存编辑
      sumbitEditRow() {
        var editData = _index;
        this.tableData[editData].name = this.editForm.name;
        this.tableData[editData].date = this.editForm.date;
        this.tableData[editData].address = this.editForm.address;
        this.editFormVisible = false;
      },
    }
  }
</script>
qq_38577700
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现表格数据的增删改查
08-30
主要为大家详细介绍了vue实现表格数据的增删改查，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【前端模糊查询】vue用elementul表格，前端写模糊查询功能，简单实现方法
seeeeeeeeeee的博客
03-17 1954
效果图 代码 html <el-table :data="tableData" stripe style="width: 100%; margin-bottom: 30px" size="mini" height="480px" > <el-table-column prop="date" label="日期" min-width="180"> &
VUE+Element UI实现简单的表格行内编辑效果
weixin_43867303的博客
02-27 1121
VUE+Element UI实现简单的表格行内编辑效果 原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 &lt;el-table class="tb-edit" style="width: 100%" ...
VUE中实现table的模糊查询相关学习（结合vuex module+axios实例）
e1172090224的博客
07-10 3034
使用VUE+element 实现纯前端的模糊查询。 关键代码 <el-table :data="tables" //绑定计算之后（模糊查询之后）的数据属性 style="width: 100%"> <el-table-column prop="date" lab...
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]
weixin_42386379的博客
02-11 7108
纯前端实现增-删-改-查(模糊查询)和分页[本地存储当成数据库(vue + element)]
如何在vue和element-ui中的table表格实现编辑
super帅的博客
05-09 1302
效果图如下 注意我是用的 dialog 弹窗 写的，大家C过去 记得写控制显示隐藏的visible 属性 <template> <el-dialog title="发送邮件" :visible="transmitshow" width="60%" :before-close="handleClose"> <el-button icon="el-icon-plus" circle type="primary"></el-button>.
Vue+element实现el-table行内编辑并校验
qq_43145310的博客
07-11 6103
el-table行内编辑，必填校验，新增、删除、编辑、数据由前端储存
vue element项目常见实现表格内部可编辑功能
JCat的博客
04-09 6万+
前言 后台系统都是各种表格表单编辑，整理了下常见的几种实现表格编辑的方式，希望有用。使用框架：vue+element 正文 简单表格行内内部可编辑，原理就是span 和 input 的切换显隐。 代码： <template> <div> <el-table :data="tabledatas" border> ...
vue3 element-plus el-table 实现指定单元格编辑
最新发布
anwenagululu的博客
10-19 3491
首先要知道是哪一行需要修改，当点击时修改，回车保存​ 在el-table上 绑定 单元格的点击事件cell-click(单击)cell-dblclick(双击) ​
vue.js+Element实现表格里的增删改查
10-20
本篇文章主要介绍了vue.js+Element实现增删改查，具有一定的参考价值，有兴趣的可以了解一下。
VUE+Element实现增删改查的示例
01-22
&最近因为一些原因，没有更博客，昨天老师布置了一个作业，用vue实现增删改查功能，想想这也不难，就做一下试试吧。 因为自己写的样式没有别人做的好，因此我想用现成的UI框架，一直也没用过Element，就干脆趁机学...
vue el-table 行内编辑表格
zhq007140的博客
09-15 989
如果是，就显示一个带有表单组件的 el-form，否则就显示普通的文本。同时，我们使用了 el-button 组件来触发编辑、保存、取消和删除的操作。在编辑和保存操作中，我们使用了 el-form 的 validate 方法来检查表单的合法性。如果合法，就退出编辑状态。在添加操作中，我们向数据数组中添加一个空的对象，并将编辑索引设为新添加的行的索引。总之，使用 el-table 的行内编辑功能需要我们自己写一些业务逻辑，但是使用 scoped-slot 的方式可以让我们非常灵活地定制每个单元格的编辑模式。
vue使用element-ui实现table表格数据行内编辑
王阿储的博客
02-01 6054
需求背景：鼠标双击编辑行内内容 实现思路：双击时获取到被点击的单元格元素，配合element内置方法，实现表单的显示与隐藏 当某表单内容显示时，自动获取光标，点击其他位置时表单会失去光标触发方法，其中一些方法是根据我自己当时的项目需要配合实现的，单独写了个相似的demo总结一下，还有很多可以改进的地方。 实现效果 html代码 <template> <div id="app"> <!-- @cell-dblclick="tableDbEdit" 当单元格被双击击时.
vue+Element中table表格实现可编辑（select下拉框）
w小博的博客
04-10 1万+
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具体操作如下： HTML代码： 1.在处理人列加入一个下拉框模板，...
vue el-table 实现行内编辑 新增 删除
m0_49515138的博客
06-18 6153
最近做一个vue前后端分离的项目，前端框架用element ui，在 使用 el-table 的过程中，需要实现行内编辑，效果大概是这样： 分为下面几个步骤： （1） 自定义 el-table 的表头（即添加 “新增” 按钮）： <el-table :data="propTableData.col.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))" h
vue+element-ui实现表格编辑
热门推荐
liaoxuewu的博客
07-24 8万+
两种实现方式 1、表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现，我们这里用input和span，正常用span将数据显示，点击编辑时，将span隐藏，显示input进行编辑。选中当前行我们可以通过slot-scope中的index去实现，在控制显示隐藏的属性上绑定index就可以选中当前行了，如showEdit[index]。 html中的代码： &amp;amp;amp;amp;amp;amp;lt;el...
vue+element ui 表格添加多个搜索条件筛选（前端查询）
yuwenwenwenwenyu的博客
06-20 5437
filterList 为筛选后的数据，可以重新给tableData赋值，赋值后如果遇到表格数据不刷新的情况，可以给table加上一个随机的key。这样可以解决重新赋值页面不刷新的情况。点击查询按钮调用下面的方法。
element-ui：el-table模糊查询/带输入建议输入框踩坑总结
weixin_46166949的博客
09-10 3466
一、表格模糊查询 具体实现效果图如下： 具体代码如下： :data="tables"这个tables绑定是的computed里的tables方法 <el-input v-model="search" placeholder="请输入搜索内容" style="margin-bottom:15px"></el-input> <el-table :data="tables" border style="width: 100%" @row-dblclick="dbCli
elementUI comboxGrid , 输入时弹出下拉表格模糊搜索，并以不同颜色标记
benson
05-12 2460
demo : https://codepen.io/bangking007/pen/qGNxvv 核心代码: comboGrid.js Vue.component("comboxGrid", { props: { // input的数据源(v-model) value: { ...
利用vue2和elementui 做一个table表格有增删改查 状态开关 展开
07-13
你可以按照以下步骤使用Vue 2和Element UI创建一个具有增删改查、状态开关和展开功能的表格： 1. 首先，确保你已经安装了Vue和Element UI库。你可以使用npm或yarn来安装它们： ```bash npm install vue@2.6.14 npm...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值