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属性来判断选中数据的状态，可切换保存和修改的按钮文字。绑定方法，传输当前行的数据和索引。
  {{scope.row.show?'保存':"修改"}}
• 方法：
  注意：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. 单行复制功能

• 绑定方法，传输当前行的数据和索引。
  单个复制

• 方法：
  注意：这里是不能直接复制,如 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. 单行删除功能

• 绑定方法，传输当前行的索引。
  单个删除
• 方法：

		delect(index) {
     	 this.tabledatas.splice(index, 1)
 		},

4. 批量修改功能

• 绑定方法
  批量编辑
• 方法：
  将所有的对象中的show属性改为true，并重新渲染到页面。

 		editAll() {
                this.tabledatas.map((i, index) => {
                    i.show = true
                    Vue.set(this.tabledatas, index, i)
                })
            },

5. 提交功能

• 绑定方法
  提交
• 方法：
  将所有的对象中的show属性改为false，并重新渲染到页面。

 		  submit() {
                this.tabledatas.map((i, index) => {
                    i.show = false
                    Vue.set(this.tabledatas, index, i)
                })
                //提交后的其他操作
            },

6. 批量复制功能

• 绑定方法
  批量增加
• 方法：
  在table中增加select选项 ,
  绑定事件@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. 批量删除功能

• 绑定方法批量删除
• 方法：
  注意：由于同时有复制的功能，所以删除的时候需要给每条数据增加一个标识 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(￣▽￣)ｄo