ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue前端实现表格数据——增查改删 [打印本页]
作者: 玛卡巴卡的卡巴卡玛    时间: 2024-6-18 19:39
标题: vue前端实现表格数据——增查改删


一、添加（增）-unshift首插入

1、【新增按钮】添加点击事件cilck；
  1. <el-button @click="handleAdd()">添加</el-button>
复制代码
2、点击【新增按钮】：
2.1、打开弹框；
2.2、内容为空。
  1. handleAdd() {
  2.         this.dialogVisible = true
  3.         this.addForm = {
  4.           name: '',
  5.           number: '',
  6.           score: '',
  7.           sex: ''
  8.         }
  9.       },
复制代码
3、弹框【确定】：
3.1、动态数据表格插入新增数据；
3.2、全部数据表格插入新增数据；
3.3、关闭弹框。
  1. handleOk() {
  2.         this.tableData.unshift(this.addForm)
  3.         this.allData.unshift(this.addForm)
  4.         this.dialogVisible = false
  5.       }
复制代码
二、搜刮（查）-filter过滤

1、【查询】按钮添加点击事件cilck；
  1. <el-button type="primary" @click="handleSelect()">查询</el-button>
复制代码
2、点击【查询】：
2.1、姓名查询：
  1. handleSelect() {
  2.          this.tableData = this.allData.filter(item => {
  3.             if (item.name.includes(this.formInline.name)) {
  4.               return true
  5.           }
  6.         })
  7.       }
复制代码
2.2、学号查询：
  1. handleSelect() {
  2. this.tableData = this.allData.filter(item => {
  3.             if (item.number === this.formInline.number) {
  4.               return true
  5.           }
  6.         })
  7. }
复制代码
2.3、姓名+学号查询：
  1. handleSelect() {
  2.         //姓名+学号同时为空
  3.         if (this.formInline.name === '' && this.formInline.number === '') {
  4.           this.tableData = [...this.allData]
  5.         } else if (this.formInline.name !== '' && this.formInline.number === '') {
  6.           //姓名查询，学号为空
  7.           this.tableData = this.allData.filter(item => {
  8.             if (item.name.includes(this.formInline.name)) {
  9.               return true
  10.             }
  11.           })
  12.         } else if (this.formInline.name === '' && this.formInline.number !== '') {
  13.           //学号查询，姓名为空
  14.           this.tableData = this.allData.filter(item => {
  15.             if (item.number === this.formInline.number) {
  16.               return true
  17.             }
  18.           })
  19.         } else if (this.formInline.name !== '' && this.formInline.number !== '') {
  20.           //姓名+学号查询，都不为空
  21.           this.tableData = this.allData.filter(item => {
  22.             if (item.name.includes(this.formInline.name) && item.number === this.formInline.number) {
  23.               return true
  24.             }
  25.           })
  26.         }
  27.       }
复制代码
三、编辑（改）-splice替换

1、【编辑】按钮绑定点击事件；
当前行获取（scope）。
  1. <el-button type="success" plain size="small" @click="handleEdit(scope)">编辑</el-button>
复制代码
2、点击【编辑】：
  2.1、判断为非添加（编辑）状态；
      2.1.1、弹框标题为【编辑】；
      2.1.2、编辑状态姓名不可编辑；
  1. <el-form-item label="姓名">
  2.           <el-input v-model="addForm.name" :disabled="isView || !isAdd"></el-input>
  3. </el-form-item>
复制代码
 2.2、解构函数：{...scope.row}；为了背面获取对象的index；
 2.3、打开弹框。
  1. handleEdit(scope) {
  2.         this.isView = false
  3.         this.isAdd = false
  4.         this.tkTitle = '编辑'
  5.         this.addForm = { ...scope.row }
  6.         this.dialogVisible = true
  7.       },
复制代码
3、点击【确定】：
  3.1、判断弹框状态是【添加】or【编辑】；
  3.2、获取index；
  3.3、找到表格index的一条，替换成修改后的当前弹框数据。
4、关闭弹框。
  1. handleOk() {
  2.         //添加确定
  3.         if (this.isAdd) {
  4.           this.tableData.unshift(this.addForm)
  5.           this.allData.unshift(this.addForm)
  6.           this.dialogVisible = false
  7.         } else {
  8.           //编辑确定
  9.           const index = this.tableData.findIndex(item => {
  10.             return item.name = this.addForm.name
  11.           })
  12.           if (index !== -1) {
  13.             this.tableData.splice(index, 1, this.addForm)
  14.           }
  15.           this.dialogVisible = false
  16.           this.allData = [...this.tabledata]
  17.         }
复制代码
四、删除（删）-splice删除

1、【删除】按钮绑定点击事件；
  1. <el-button type="warning" plain size="small" @click="handleDelete(scope)">删除</el-button>
复制代码
2、点击【删除】：
 2.1、找到当前行的index；
 2.2、删除当前index对应的数据。
  1. handleDelete(scope) {
  2.         const index = this.tableData.findIndex(item => {
  3.           return item.name === scope.row.name
  4.         })
  5.         if (index !== -1) {
  6.           this.tableData.splice(index, 1)
  7.           this.allData =  [...this.tableData]
  8.         }
  9.       }
复制代码
 五、重置

1、【重置】添加点击事件cilck；
  1. <el-button @click="handleReset()">重置</el-button>
复制代码
2、点击【重置】：
2.1、查询条件为空；
2.2、表格内容表现全部：运用解构函数，allData数组浅拷贝给tableData数组。
  1. handleReset() {
  2.         this.formInline = {
  3.           name: '',
  4.           number: '',
  5.           sex: ''
  6.         }
  7.         this.tableData = [...this.allData]
  8.       }
复制代码
六、查看

1、【查看】绑定点击事件click；
表现表格时,当前行数据的获取：slot-scope="scope"
  1. <template slot-scope="scope">
  2.           <el-button type="primary" plain size="small" @click="handleView(scope)">查看</el-button>
  3. </template>
复制代码
2、点击【查看】：
2.1、弹框是“查看”状态；
      2.1.1、弹框标题表现为“查看”；
      2.1.2、查看状态下，内容不可编辑；
2.2、弹框表现当前行数据；
2.3、打开弹框。
  1. :title="tkTitle"
  3. :disabled="isView"
复制代码
  1. handleView(scope) {
  2.         this.isView = true
  3.         this.tkTitle = '查看'
  4.         this.addForm = scope.row        
  5.         this.dialogVisible = true
  6.       }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4