2
【技术实战】Vue技术实战【二】 - 程序员天佑
source link: https://www.cnblogs.com/yyyyfly1/p/17578708.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
需求实战一
<template>
<div>
<a-table :dataSource="dataSource" :columns="columns" />
</div>
</template>
<script setup lang="ts">
const dataSource= ref([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
])
const columns=ref([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
])
</script>这段代码是一个使用Vue 3的组件，用于展示一个表格。代码中使用了Vue的模板语法，通过<template>标签定义了组件的模板部分。在模板中，使用了<a-table>标签来展示表格，通过:dataSource和:columns属性绑定了数据源和列的配置。
在<script setup>标签中，使用了Vue 3的新特性<script setup>，它可以简化组件的写法。在这里，定义了两个响应式变量dataSource和columns，它们分别存储了表格的数据源和列的配置。ref函数用于将普通变量转换为响应式变量。
dataSource是一个数组，存储了表格的数据。每个数据对象都有key、name、age和address属性，分别表示数据的唯一标识、姓名、年龄和住址。
columns也是一个数组，存储了表格的列的配置。每个列配置对象都有title、dataIndex和key属性，分别表示列的标题、数据索引和唯一标识。
这段代码的作用是展示一个简单的表格，表格的数据和列的配置都是通过响应式变量来管理的，可以方便地进行数据的更新和操作。
需求实战二
<template>
<div>
<a-button type="primary" @click="addRow">新增</a-button>
<br>
<br>
<br>
<a-table :dataSource="dataSource" :columns="columns" bordered>
<template #operation="{ record }">
<a-button type="primary" @click="editRow(record)">编辑</a-button>
 
 
 
<a-button type="danger" @click="deleteRow(record)">删除</a-button>
</template>
<template #title>
<div style="text-align: center;">个人信息表格</div>
</template>
</a-table>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const dataSource = ref([
{
key: '1',
name: '张三',
age: '32',
address: '天安门广场',
},
{
key: '2',
name: '李四',
age: '42',
address: '紫禁城',
},
])
const columns = ref([
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
{
title: '操作',
dataIndex: 'operation',
slots: { customRender: 'operation' },
},
])
const editRow = (record: any) => {
const index = dataSource.value.findIndex((item: any) => item.key === record.key);
if (index !== -1) {
const newName = prompt('Enter new name:');
const newAge = prompt('Enter new age:');
const newAddress = prompt('Enter new address:');
if (newName && newAge && newAddress) {
dataSource.value[index].name = newName;
dataSource.value[index].age = newAge;
dataSource.value[index].address = newAddress;
}
}
}
const deleteRow = (record: any) => {
const index = dataSource.value.findIndex((item) => item.key === record.key)
if (index !== -1) {
dataSource.value.splice(index, 1)
}
}
const addRow = () => {
const newName = prompt('Enter name:');
const newAge = prompt('Enter age:');
const newAddress = prompt('Enter address:');
if (newName && newAge && newAddress) {
const newKey = String(dataSource.value.length + 1);
dataSource.value.push({
key: newKey,
name: newName,
age: newAge,
address: newAddress,
});
}
}
</script>这段代码是一个基于Vue框架的前端页面，用于展示一个个人信息表格，并提供了新增、编辑和删除功能。
在模板部分，使用了Ant Design Vue组件库中的<a-table>和<a-button>组件来构建页面。<a-table>组件用于展示表格数据，通过:dataSource和:columns属性绑定数据源和列配置。在<a-table>组件内部，使用了两个<template>标签来自定义表格的标题和操作列。
在脚本部分，使用了Vue 3中的<script setup>语法，引入了ref函数来创建响应式数据。dataSource和columns分别是表格的数据源和列配置，通过ref函数将其转换为响应式数据。editRow、deleteRow和addRow是处理编辑、删除和新增操作的函数。
editRow函数用于编辑表格行数据，首先根据传入的record参数找到对应的数据索引，然后通过prompt函数弹出输入框，获取新的姓名、年龄和地址。如果输入框有值，则更新对应数据的属性值。
deleteRow函数用于删除表格行数据，同样根据传入的record参数找到对应的数据索引，然后使用splice方法从数据源中删除该数据。
addRow函数用于新增表格行数据，同样使用prompt函数弹出输入框，获取新的姓名、年龄和地址。如果输入框有值，则生成一个新的key值，并将新数据添加到数据源中。
整体来说，这段代码实现了一个简单的个人信息表格，并提供了编辑、删除和新增功能。
需求实战三
<template>
<ARow>
<a-button type="primary" @click="handleAdd" >新增</a-button>
</ARow>
<br>
<br>
<br>
<ARow>
<a-table :columns="columns" :data-source="dataSource" bordered>
<template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col">
<div>
<a-input
v-if="editableData[record.key]"
v-model:value="editableData[record.key][col]"
style="margin: -5px 0"
/>
<template v-else>
{{ text }}
</template>
</div>
</template>
<template #operation="{ record }">
<div class="editable-row-operations">
<span v-if="editableData[record.key]">
<div style="display: flex; justify-content: space-between;">
<a-button type="primary" @click="save(record.key)">保存</a-button>
   
<a-button type="danger" @click="cancel(record.key)">
取消
</a-button>
</div>
</span>
<span v-else>
<div style="display: flex; justify-content: space-between;">
<a-button type="primary" @click="edit(record.key)">编辑</a-button>
   
<a-button type="danger" @click="onDelete(record.key)">删除</a-button>
</div>
</span>
</div>
</template>
</a-table>
</ARow>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash-es';
import { reactive, UnwrapRef } from 'vue';
const columns = [
{
title: 'name',
dataIndex: 'name',
slots: { customRender: 'name' },
},
{
title: 'age',
dataIndex: 'age',
slots: { customRender: 'age' },
},
{
title: 'address',
dataIndex: 'address',
slots: { customRender: 'address' },
},
{
title: 'operation',
dataIndex: 'operation',
slots: { customRender: 'operation' },
},
];
interface DataItem {
key: string;
name: string;
age: number;
address: string;
}
const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const handleAdd = () => {
const newData = {
key: `${count.value}`,
name: `Edward King ${count.value}`,
age: 32,
address: `London, Park Lane no. ${count.value}`,
};
dataSource.value.push(newData);
};
const count = computed(() => dataSource.value.length + 1);
const dataSource = ref(data);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
const edit = (key: string) => {
editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
delete editableData[key];
};
const cancel = (key: string) => {
delete editableData[key];
};
const onDelete = (key: string) => {
dataSource.value = dataSource.value.filter(item => item.key !== key);
};
</script>这段代码是一个包含表格和编辑功能的Vue组件。主要功能是展示一个包含姓名、年龄、地址等信息的表格，并提供编辑、保存、取消和删除功能。
在模板部分，使用了Ant Design Vue组件库的<a-table>和<a-button>组件来实现表格和按钮的展示。表格的列定义在columns数组中，每一列都有一个对应的dataIndex属性指定数据源中的字段名，以及一个slots属性指定自定义渲染的插槽名。
在数据部分，定义了一个DataItem接口表示表格中的每一行数据，以及一个data数组用于存储所有的数据。通过循环生成了100条测试数据，并将其赋值给dataSource变量。
在脚本部分，使用了Vue 3的<script setup>语法来定义组件的逻辑部分。首先引入了lodash-es库中的cloneDeep函数和Vue的reactive和ref函数。然后定义了一些响应式的变量，包括dataSource用于存储表格数据，editableData用于存储正在编辑的数据，以及count用于生成新数据的键值。
接下来定义了一些处理函数，包括handleAdd用于新增数据，edit用于编辑数据，save用于保存编辑后的数据，cancel用于取消编辑，以及onDelete用于删除数据。这些函数通过操作dataSource和editableData来实现相应的功能。
最后，将定义的变量和函数导出供模板部分使用。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK