【技术实战】Vue技术实战【二】

需求实战一

效果展示

代码展示

<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>
                &nbsp
                &nbsp
                &nbsp
                <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>
    &nbsp&nbsp&nbsp

          <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>
    &nbsp&nbsp&nbsp
  <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来实现相应的功能。

 

最后，将定义的变量和函数导出供模板部分使用。