vue+element的表格最优实现单条和批量修改、保存、复制、删除、新增、提交数据功能

前言

上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。
主要功能批量的新增,复制,删除,修改,保存,和逐条的复制,删除,修改,保存功能
demo源码在最下面,针对新手前端小白还挺有用的~
在这里插入图片描述
在这里插入图片描述

正文

1. 表格的数据展示

使用的是el-table 绑定数据源 :data="tabledatas",在script的data中挂载tabledatas,在created中发请求赋值,增加属性show来控制input的显隐
map方法和foreach类似。

    created() {
            this.tabledatas = [
                { title: '标题1', text: 's111sssa' },
                { title: '标题2', text: 'ss222ssa' },
            ]
            this.tabledatas.map(i => {
                i.show = false
                return i
            })
        },

2. 单行修改保存功能

  • 通过show属性来判断选中数据的状态,可切换保存和修改的按钮文字。绑定方法,传输当前行的数据和索引。
    <el-button @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"修改"}}</el-button>
  • 方法:
    注意:vue检测不到通过索引改变数据和数组长度的变化,如果直接this双向绑定修改,值发生变化了,但是页面数据不变。所以要用vue.set,更新数据,两种方法。
    1.组件先导入vue import Vue from 'vue'Vue.set(this.tabledatas, index, row)
    2.或者直接this.$set(this.tabledatas, index, row)
edit(row, index) {
      row.show = row.show ? false : true
            Vue.set(this.tabledatas, index, row)
            //this.$set(this.tabledatas, index, row)
                // 其他操作
   },

3. 单行复制功能

  • 绑定方法,传输当前行的数据和索引。
    <el-button @click="cope(scope.row,scope.$index)">单个复制</el-button>

  • 方法:
    注意:这里是不能直接复制,如 let obj = val,这样会把整条数据类型cope给obj,新增的数据变化,原有的数据也会发生变化。
    原因:js 赋值运算符的浅拷贝,相当于使两个数组指针指向相同的地址,任一个数组元素发生改变,影响另一个

    解决方法1:给新对象的属性赋值,然后push到绑定的数组中。
    解决方法2:使用splice方法,深拷贝一下切断引用即可。

方法一:
 cope(val, index) {
      let obj = {
             title: val.title,
             text: val.text
          }
      this.tabledatas.push(obj)
   },
方法二:
   cope(val, index) {
     this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
   },    

3. 单行删除功能

  • 绑定方法,传输当前行的索引。
    <el-button @click="delect(scope.$index)">单个删除</el-button>
  • 方法:
		delect(index) {
     	 this.tabledatas.splice(index, 1)
 		},

4. 批量修改功能

  • 绑定方法
    <el-button @click="editAll">批量编辑</el-button>
  • 方法:
    将所有的对象中的show属性改为true,并重新渲染到页面。
 		editAll() {
                this.tabledatas.map((i, index) => {
                    i.show = true
                    Vue.set(this.tabledatas, index, i)
                })
            },

5. 提交功能

  • 绑定方法
    <el-button @click="submit">提交</el-button>
  • 方法:
    将所有的对象中的show属性改为false,并重新渲染到页面。
 		  submit() {
                this.tabledatas.map((i, index) => {
                    i.show = false
                    Vue.set(this.tabledatas, index, i)
                })
                //提交后的其他操作
            },

6. 批量复制功能

  • 绑定方法
    <el-button @click="addAll">批量增加</el-button>
  • 方法:
    在table中增加select选项 <el-table-column type="selection"></el-table-column>,
    绑定事件@selection-change="handleSelectionChange"this.multipleSelection接收数据
    实现功能:有选中的数据时复制数据,没有则新增一条空数据。
	handleSelectionChange(val) {
                this.multipleSelection = val;
            }
 	addAll() {
                if (this.multipleSelection.length == 0) {
                    let list = {
                        title: "",
                        text: ""
                    }
                    this.tabledatas.push(list)
                } else {
                    this.multipleSelection.forEach((val, index)=> {
                   		this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
                    });
                }
            },

7. 批量删除功能

  • 绑定方法<el-button @click="delectAll">批量删除</el-button>
  • 方法:
    注意:由于同时有复制的功能,所以删除的时候需要给每条数据增加一个标识 id,不然选中一条但会同时删掉被复制的条数。当选中的数据id和整体数据的id相同时就在数据中splice掉
 		 delectAll() {
                for (let i = 0; i < this.tabledatas.length; i++) {
                    const element = this.tabledatas[i];
                    element.id = i
                }
                if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
                this.multipleSelection.forEach(element => {
                    this.tabledatas.forEach((e, i) => {
                        if (element.id == e.id) {
                            this.tabledatas.splice(i, 1)
                        }
                    });
                });
            },

demo 源码如下

<template>
    <div>
        <el-button @click="editAll">批量编辑</el-button>
        <el-button @click="submit">提交</el-button>
        <el-button @click="addAll">批量增加</el-button>
        <el-button @click="delectAll">批量删除</el-button>
        <el-table :data="tabledatas" border @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="title">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.title"></el-input>
                    </span>
                    <span v-else>{{scope.row.title}}</span>
                </template>
            </el-table-column>
            <el-table-column label="text">
                <template slot-scope="scope">
                    <span v-if="scope.row.show">
                        <el-input size="mini" placeholder="请输入内容" v-model="scope.row.text"></el-input>
                    </span>
                    <span v-else>{{scope.row.text}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"修改"}}</el-button>
                    <el-button @click="cope(scope.row,scope.$index)">单个复制</el-button>
                    <el-button @click="delect(scope.$index)">单个删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                tabledatas: [],
                multipleSelection: [],
            }
        },
        created() {
            this.tabledatas = [
                { title: '标题1', text: 's111sssa' },
                { title: '标题2', text: 'ss222ssa' },
            ]
            this.tabledatas.map(i => {
                i.show = false
                return i
            })
        },
        methods: {
            edit(row, index) {
                row.show = row.show ? false : true
                Vue.set(this.tabledatas, index, row)
                // 修改后保存
            },
            editAll() {
                this.tabledatas.map((i, index) => {
                    i.show = true
                    Vue.set(this.tabledatas, index, i)
                })
            },
            submit() {
                this.tabledatas.map((i, index) => {
                    i.show = false
                    Vue.set(this.tabledatas, index, i)
                })
            },
            // 单个复制
            cope(val, index) {
     			this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
   			},  
            // 单个删除
            delect(index) {
                this.tabledatas.splice(index, 1)
            },
            //批量新增
            addAll() {
                if (this.multipleSelection.length == 0) {
                    let list = {
                        title: "",
                        text: ""
                    }
                    this.tabledatas.push(list)
                } else {
                     this.multipleSelection.forEach((val, index)=> {
                   		this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
                    });
                }
            },
            //批量删除
            delectAll() {
                for (let i = 0; i < this.tabledatas.length; i++) {
                    const element = this.tabledatas[i];
                    element.id = i
                }
                if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
                this.multipleSelection.forEach(element => {
                    this.tabledatas.forEach((e, i) => {
                        if (element.id == e.id) {
                            this.tabledatas.splice(i, 1)
                        }
                    });
                });
            },
            //选
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
    }
</script>

结语

以上,把能踩得坑都也写出来了,基本表格这块应该是没什么问题了,有其他的问题可以留言

如果本文对你有帮助的话,请给我点赞打call哦~o( ̄▽ ̄)do

  • 85
    点赞
  • 331
    收藏
    觉得还不错? 一键收藏
  • 36
    评论
要在VueElement UI中添加一个新增功能,你需要完成以下步骤: 1. 首先,在你的Vue组件中引入Element UI中的表格组件,并确保你已经正确安装了Element UI: ```javascript import { Table, TableColumn, Dialog, Button } from 'element-ui'; ``` 2. 在你的Vue组件模板中,添加一个表格组件,并将数据绑定到表格的data属性上: ```html <template> <div> <el-table :data="tableData"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> <el-table-column label="Operation"> <template slot-scope="scope"> <el-button @click="edit(scope.row)">Edit</el-button> <el-button @click="delete(scope.row)">Delete</el-button> </template> </el-table-column> </el-table> </div> </template> ``` 3. 添加一个按钮或其他交互元素,以触发新增事件。在点击事件中,使用Element UI的Dialog组件显示一个对话框,用于输入新增数据: ```html <template> <div> <el-button @click="showAddDialog">Add</el-button> <el-table :data="tableData"> <!-- table columns... --> </el-table> <el-dialog title="Add New Entry" :visible.sync="addDialogVisible"> <!-- form fields... --> </el-dialog> </div> </template> <script> export default { data() { return { tableData: [], addDialogVisible: false, formData: {} // 新增表单数据 }; }, methods: { showAddDialog() { this.addDialogVisible = true; }, addRow() { // 将新增数据添加到表格数据中 this.tableData.push(this.formData); // 关闭对话框并重置表单数据 this.addDialogVisible = false; this.formData = {}; } } } </script> ``` 4. 在对话框中添加表单元素,以允许用户输入新增数据。你可以使用Element UI的Form和FormItem组件来创建表单: ```html <el-dialog title="Add New Entry" :visible.sync="addDialogVisible"> <el-form :model="formData"> <el-form-item label="Name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="Age"> <el-input v-model="formData.age"></el-input> </el-form-item> <el-form-item label="Address"> <el-input v-model="formData.address"></el-input> </el-form-item> </el-form> <div slot="footer"> <el-button @click="addRow">Confirm</el-button> <el-button @click="addDialogVisible = false">Cancel</el-button> </div> </el-dialog> ``` 这样,你就可以在VueElement UI中添加一个表格新增功能了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值