目录
- 前言
- 正文
- 1. 表格的数据展示
- 2. 单行修改保存功能
- 3. 单行复制功能
- 3. 单行删除功能
- 4. 批量修改功能
- 5. 提交功能
- 6. 批量复制功能
- 7. 批量删除功能
- demo 源码如下
- 结语
前言
上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。
主要功能 ：批量的新增，复制，删除，修改，保存，和逐条的复制，删除，修改，保存功能。
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.组件先导入vueimport 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(￣▽￣)ｄo
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
