- A+
所属分类：Web前端
需求实战一
效果展示
代码展示
<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来实现相应的功能。
最后，将定义的变量和函数导出供模板部分使用。
