vue+element的表格最优实现单条和批量修改、保存、复制、删除、新增、提交数据功能
前言正文表格的数据展示单行修改保存功能单行复制功能单行删除功能批量修改功能提交功能批量复制功能批量删除功能demo 源码如下结语前言上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。主要功能 ：批量的新增，复制，删除，修改，保存，和逐条的复制，删除，修改，保存功能。demo源码在最下面，针对新手前端小白还挺有用的~正文表格的数据展示使用的是el-table 绑定数据源 :data=“ta
前言
正文
- 表格的数据展示
- 单行修改保存功能
- 单行复制功能
- 单行删除功能
- 批量修改功能
- 提交功能
- 批量复制功能
- 批量删除功能
demo 源码如下
结语
前言
上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。
主要功能 ：批量的新增，复制，删除，修改，保存，和逐条的复制，删除，修改，保存功能。
demo源码在最下面，针对新手前端小白还挺有用的~
正文
- 表格的数据展示
使用的是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.
i
n
d
e
x
)
"
>
s
c
o
p
e
.
r
o
w
.
s
h
o
w
?
′
保
存
′
:
"
修
改
"
<
/
e
l
−
b
u
t
t
o
n
>
方
法
：
注
意
：
v
u
e
检
测
不
到
通
过
索
引
改
变
数
据
和
数
组
长
度
的
变
化
，
如
果
直
接
t
h
i
s
双
向
绑
定
修
改
，
值
发
生
变
化
了
，
但
是
页
面
数
据
不
变
。
所
以
要
用
v
u
e
.
s
e
t
，
更
新
数
据
,
两
种
方
法
。
1.
组
件
先
导
入
v
u
e
i
m
p
o
r
t
V
u
e
f
r
o
m
′
v
u
e
′
再
V
u
e
.
s
e
t
(
t
h
i
s
.
t
a
b
l
e
d
a
t
a
s
,
i
n
d
e
x
,
r
o
w
)
2.
或
者
直
接
t
h
i
s
.
index)">{{scope.row.show?'保存':"修改"}}</el-button> 方法： 注意：vue检测不到通过索引改变数据和数组长度的变化，如果直接this双向绑定修改，值发生变化了，但是页面数据不变。所以要用vue.set，更新数据,两种方法。 1.组件先导入vue import Vue from 'vue'再Vue.set(this.tabledatas, index, row) 2.或者直接this.
index)">scope.row.show?′保存′:"修改"</el−button>方法：注意：vue检测不到通过索引改变数据和数组长度的变化，如果直接this双向绑定修改，值发生变化了，但是页面数据不变。所以要用vue.set，更新数据,两种方法。1.组件先导入vueimportVuefrom′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)”>单个复制
方法：
注意：这里是不能直接复制,如 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)”>单个删除
方法：
delect(index) {
this.tabledatas.splice(index, 1)
},
4. 批量修改功能
绑定方法
<el-button @click=“editAll”>批量编辑
editAll() {
this.tabledatas.map((i, index) => {
i.show = true
Vue.set(this.tabledatas, index, i)
})
},
6. 批量复制功能
绑定方法
<el-button @click=“addAll”>批量增加
方法：
在table中增加select选项 ,
绑定事件@selection-change=“handleSelectionChange”，this.multipleSelection接收数据
实现功能：有选中的数据时复制数据，没有则新增一条空数据。
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”>批量删除
方法：
注意：由于同时有复制的功能，所以删除的时候需要给每条数据增加一个标识 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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)