前端开发小笔记--在数组中给字段添加值与删除字段的操作
文章发布较早，内容可能过时，阅读注意甄别。
前端开发，没有基础，很多东西只能边用边琢磨边学习。学到一招，有用，赶快记录下来，作为小笔记，日积月累，成为一个辅助自己开发的手册。
那么废话不多说，直接上记录。
# 在数组中给字段添加值
看图说话：
此图表单地址：点我查看 (opens new window)
# 场景概述
在一个大的表单当中，如上每行编辑可能会作为一个用户对象的子项存在，举个例子，比如这个大表单是用户的个人信息，再有一个表存用户的 VIP 充值管理，这个时候，用户的姓名就没必要在这个小表单里出现，因为大表单中已经有这个字段了。
于是小表单实际数据为：
[
{
"vip_type": "aiqiyi",
"vip_pay": 10
},
{
"vip_type": "youku",
"vip_pay": 20
}
]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
但因为这张独立的表是通过用户名与用户表关联的，因此实际传递给后端的时候，需要把用户名带上。
后端希望要的表单形式如下：
[
{
"username": "xiaoming",
"vip_type": "aiqiyi",
"vip_pay": 10
},
{
"username": "xiaoming",
"vip_type": "youku",
"vip_pay": 20
}
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 解决方案
其一：在data中预先声明 username 字段后，后续赋值可直接响应式更新，无需特殊API
data() {
return {
tableData: [
{ vip_type: "aiqiyi", vip_pay: 10, username: '' },
{ vip_type: "youku", vip_pay: 20, username: '' }
]
}
}
methods: {
setDefaultName() {
this.tableData.forEach(item => {
item.username = 'xiaoming'; // 此时可直接赋值
});
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
其二：通过Vue提供的响应式API强制触发更新机制。当通过索引操作数组元素时，$set 方法会为对象添加新属性并建立响应式追踪。(此方法我未验证)
methods: {
addNameField() {
this.tableData.forEach((item, index) => {
this.$set(this.tableData[index], 'username', 'xiaoming');
});
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
其三：扩展运算符创建包含新字段的对象，用新数组覆盖旧数组。Vue能检测到数组引用变化并触发视图更新。
methods: {
addNameField() {
this.tableData = this.tableData.map(item => ({
...item,
username: 'xiaoming'
}));
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 删除数字中的某个字段
与上边操作同样的场景，在针对列表做一些增删改查，或者拷贝操作的时候，会存在 ID 重复的情况，比如数据如下：
[
{
"id": 1,
"username": "xiaoming",
"vip_type": "aiqiyi",
"vip_pay": 10
},
{
"id": 1,
"username": "xiaoming",
"vip_type": "youku",
"vip_pay": 20
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
希望把每个对象中的 ID 字段删除掉。
方案一：
methods: {
removeNameField() {
this.tableData.forEach(item => {
this.$delete(item, 'id') // 删除每个对象的 id 字段
});
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
方案二：避免直接修改原始对象，符合 Vue 的数组变更检测机制
methods: {
removeName(index) {
const newItem = { ...this.tableData[index] }
delete newItem.name // 在副本上操作
this.tableData.splice(index, 1, newItem) // 替换原对象
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# el-button 增加 el-popconfirm 之后间距问题
一般我们在表格的操作区域，会有多个 button，某一些可能需要二次确认，此时借助 el-popconfirm 实现会比较好。
但是使用之后，会发现 button 之间的间距会出现问题：
此时可在 delete 的 button 上增加一个 css，style="margin-left: 10px"：
<el-popconfirm
title="确定删除该记录吗？"
confirm-button-text="确认"
cancel-button-text="取消"
@confirm="deleteRow(scope.$index)"
@cancel="handleCancel">
<template #reference>
<el-button
type="danger"
icon="el-icon-delete"
style="margin-left: 10px"
circle
size="small">
</el-button>
</template>
</el-popconfirm>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
然后就能解决掉 button 的边距问题了。
上次更新: 2025/03/25, 21:52:25
|