自研国产零依赖前端UI框架实战009 数组相关方法和新增修改功能

摘要：// 将元素插入数组的指定位置const insert = (arr, // 数组element, // 元素index, // 指定索引) => {if (index < 0 || index > arr.length) returnarr.splice(i

前言

我们已经实现了用户管理相关的页面,为此也封装了很多的组件.

按照原本的计划, 我们还要封装一些常用的操作数组的方法.

将元素插入数组的任意位置

// 将元素插入数组的指定位置
const insert = (
arr, // 数组
element, // 元素
index, // 指定索引
) => {
if (index arr.length) return
arr.splice(index, 0, element);
return arr;
}

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
insert(arr, 11, 3)
console.log(arr)

将元素插入数组头部

封装一个js的方法, 这个方法接收一个数组和一个元素, 能够将元素响应式的插入数组的头部.

// 将元素插入数组的指定位置
const insert = (
arr, // 数组
element, // 元素
index, // 指定索引
) => {
if (index arr.length) return
arr.splice(index, 0, element);
return arr;
}

// 将元素插入数组的头部
const insertHead = (
arr, // 数组
element, // 元素
) => {
insert(arr, element, 0);
return arr;
}

let arr = [1, 2, 3];
insert(arr, 11, 1)
console.log(arr)
insertHead(arr, 33)
console.log(arr)

这样我们就可以得到一个新增用户以后, 将新用户插入到数组头部的简便方法.

移除指定的元素

// 移除指定索引的元素
const remove = (arr, index) => {
if (index = arr.length) return
arr.splice(index, 1);
return arr;
}

// 移除末尾的元素
const pop = (arr) => {
remove(arr, arr.length - 1);
return arr;
}

let arr = [1, 2, 3];
remove(arr, 1)
console.log(arr)
pop(arr)
console.log(arr)

根据id查找索引

functiongetIndexById(arr, id) {
for (let i = 0; i < arr.length; i++) if (arr[i].id === id) return i
return-1
}

let arr = [
{id: 1},
{id: 2},
{id: 3},
];
console.log(getIndexById(arr, 3));

下一步做什么

我们现在有了一些数组的简单方法, 下一步就是把这些方法用起来.

我们可以先把项目跑起来, 然后逐步完成剩下的功能.

比如新增用户的功能.

我们现在看看现在的项目长什么样?

在这里插入图片描述

添加完毕以后, 李四这个用户要在表格的第一行展示出来.

在这里插入图片描述

效果实现了, 非常的nice, 这和我们之前做的努力有很大的关系.

因为我们这里的核心代码就下面几行, 非常的简单.

let newUser = {
id: random.id1,
name: formDataUser.name,
age: formDataUser.age,
}
array.insertFirst(data.value, newUser)

此时App.vue完整代码如下:

import zdp_table1 from"./zdpui/components/zdp_table1.vue";
import zdp_page1 from"./zdpui/components/zdp_page1.vue";
import random from"./zdpui/js/random.js";
import {reactive, ref} from"vue";
import zdp_confirm1 from"./zdpui/components/zdp_confirm1.vue";
import zdp_modal1 from"./zdpui/components/zdp_modal1.vue";
import Zdp_input1 from"./zdpui/components/zdp_input1.vue";
import Zdp_button1 from"./zdpui/components/zdp_button1.vue";
import array from"./zdpui/js/array.js";

const columns = [
{
title: "员工编号",
key: "id",
width: 80,
align: "center"
},
{
title: "姓名",
key: "name",
width: 100,
align: "center"
},
{
title: "年龄",
key: "age",
width: 100,
align: "center"
}
]

const page = ref(1);
const size = ref(10);
const total = ref(100);
const data = ref(random.users(size.value))

const onChangePage = (v) => {
page.value = v
const newData = random.getPageUser(
page.value,
size.value,
)
data.value = newData.data
total.value = total.value
}

const isEdit = ref(false);
const onEdit = (index, item) => {
console.log("编辑", index, item)
isEdit.value = true;
isShowUserDialog.value = true;
formDataUser.name = item.name
formDataUser.age = item.age
modalTitle.value = "编辑用户"
}
const onDelete = (index, item) => {
console.log("删除", index, item)
showDeleteDialog.value = true;
}
const showDeleteDialog = ref(false);
const onConfirmDelete = => {
console.log("确认删除");
false;
};
const onCloseDeleteDialog = => {
console.log("取消删除");
false;
};

const isShowUserDialog = ref(false);
const formDataUser = reactive({name: "张三", age: 23});
const modalTitle = ref("编辑用户");

const onSaveUser = => {
console.log("保存用户", formDataUser);
false;

if (isEdit.value) {

} else {
let newUser = {
id: random.id1,
name: formDataUser.name,
age: formDataUser.age,
}
array.insertFirst(data.value, newUser)
}

isEdit.value = false;
formDataUser.name = ""
formDataUser.age = 0
};

const handleCloseDialog = => {
false;
};
const onShowAddUserModal = => {
true;
formDataUser.name = ""
formDataUser.age = 0
modalTitle.value = "新增用户"
};

@click="onShowAddUserModal"
text="新增"
/>
:columns="columns"
:data="data"
@edit="onEdit"
@delete="onDelete"
/>
:page="page"
:size="size"
:total="total"
@change="onChangePage"
/>
:show="showDeleteDialog"
@confirm="onConfirmDelete"
@close="onCloseDeleteDialog"
/>
:show="isShowUserDialog"
:title="modalTitle"
@confirm="onSaveUser"
@close="handleCloseDialog"
>
label="姓名"
v-model="formDataUser.name"
placeholder="请输入姓名"
/>
label="年龄"
type="number"
v-model="formDataUser.age"
placeholder="请输入年龄"
/>

当我点击编辑按钮的时候, 弹出一个编辑的对话框, 此时对话框里面显示的是要编辑的用户信息.

在这里插入图片描述

当我编辑信息, 点击修改以后, 表格里面对应的数据要发生修改.

在这里插入图片描述

一切都比较完美.

这里有两个核心的方法, 一个是点击编辑按钮的时候触发的显示编辑对话框的方法.

const onShowEditDialog = (index, item) => {
console.log("编辑", index, item)
isEdit.value = true;
isShowUserDialog.value = true;
editId.value = item.id
editIndex.value = index
formDataUser.name = item.name
formDataUser.age = item.age
modalTitle.value = "编辑用户"
}

另一个是当点击对话框中的保存按钮, 触发的修改数据的方法.

data.value[editIndex.value] = {
id: editId.value,
...formDataUser,
};

此时App.vue的完整代码如下.

import zdp_table1 from"./zdpui/components/zdp_table1.vue";
import zdp_page1 from"./zdpui/components/zdp_page1.vue";
import random from"./zdpui/js/random.js";
import {reactive, ref} from"vue";
import zdp_confirm1 from"./zdpui/components/zdp_confirm1.vue";
import zdp_modal1 from"./zdpui/components/zdp_modal1.vue";
import Zdp_input1 from"./zdpui/components/zdp_input1.vue";
import Zdp_button1 from"./zdpui/components/zdp_button1.vue";
import array from"./zdpui/js/array.js";

const columns = [
{
title: "员工编号",
key: "id",
width: 80,
align: "center"
},
{
title: "姓名",
key: "name",
width: 100,
align: "center"
},
{
title: "年龄",
key: "age",
width: 100,
align: "center"
}
]

const page = ref(1);
const size = ref(10);
const total = ref(100);
const data = ref(random.users(size.value))

const onChangePage = (v) => {
page.value = v
const newData = random.getPageUser(
page.value,
size.value,
)
data.value = newData.data
total.value = total.value
}

const isEdit = ref(false);
const editId = ref(0);
const editIndex = ref(0);

// 点击编辑, 显示编辑对话框
const onShowEditDialog = (index, item) => {
console.log("编辑", index, item)
isEdit.value = true;
isShowUserDialog.value = true;
editId.value = item.id
editIndex.value = index
formDataUser.name = item.name
formDataUser.age = item.age
modalTitle.value = "编辑用户"
}

const onDelete = (index, item) => {
console.log("删除", index, item)
showDeleteDialog.value = true;
}
const showDeleteDialog = ref(false);
const onConfirmDelete = => {
console.log("确认删除");
false;
};
const onCloseDeleteDialog = => {
console.log("取消删除");
false;
};

const isShowUserDialog = ref(false);
const formDataUser = reactive({name: "张三", age: 23});
const modalTitle = ref("编辑用户");

// 点击对话框中的保存按钮
const onSave = => {
console.log("保存用户", formDataUser);
false;

if (isEdit.value) {
data.value[editIndex.value] = {
id: editId.value,
...formDataUser,
};
} else {
let newUser = {
id: random.id1,
name: formDataUser.name,
age: formDataUser.age,
}
array.insertFirst(data.value, newUser)
}

isEdit.value = false;
formDataUser.name = ""
formDataUser.age = 0
};

const handleCloseDialog = => {
false;
};
const onShowAddUserModal = => {
true;
formDataUser.id = 0
formDataUser.name = ""
formDataUser.age = 0
modalTitle.value = "新增用户"
};

@click="onShowAddUserModal"
text="新增"
/>
:columns="columns"
:data="data"
@edit="onShowEditDialog"
@delete="onDelete"
/>
:page="page"
:size="size"
:total="total"
@change="onChangePage"
/>
:show="showDeleteDialog"
@confirm="onConfirmDelete"
@close="onCloseDeleteDialog"
/>
:show="isShowUserDialog"
:title="modalTitle"
@confirm="onSave"
@close="handleCloseDialog"
>
label="姓名"
v-model="formDataUser.name"
placeholder="请输入姓名"
/>
label="年龄"
type="number"
v-model="formDataUser.age"
placeholder="请输入年龄"
/>