需求实战一效果展示
代码展示
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', },])代码解读这段代码是一个使用Vue 3的组件，用于展示一个表格。代码中使用了Vue的模板语法，通过标签定义了组件的模板部分。在模板中，使用了标签来展示表格，通过:dataSource和:columns属性绑定了数据源和列的配置。在标签中，使用了Vue 3的新特性，它可以简化组件的写法。在这里，定义了两个响应式变量dataSource和columns，它们分别存储了表格的数据源和列的配置。ref函数用于将普通变量转换为响应式变量。dataSource是一个数组，存储了表格的数据。每个数据对象都有key、name、age和address属性，分别表示数据的唯一标识、姓名、年龄和住址。columns也是一个数组，存储了表格的列的配置。每个列配置对象都有title、dataIndex和key属性，分别表示列的标题、数据索引和唯一标识。这段代码的作用是展示一个简单的表格，表格的数据和列的配置都是通过响应式变量来管理的，可以方便地进行数据的更新和操作。需求实战二效果展示
代码展示
新增
编辑       删除 个人信息表格 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, }); }}代码解读这段代码是一个基于Vue框架的前端页面，用于展示一个个人信息表格，并提供了新增、编辑和删除功能。在模板部分，使用了Ant Design Vue组件库中的和组件来构建页面。组件用于展示表格数据，通过:dataSource和:columns属性绑定数据源和列配置。在组件内部，使用了两个标签来自定义表格的标题和操作列。在脚本部分，使用了Vue 3中的语法，引入了ref函数来创建响应式数据。dataSource和columns分别是表格的数据源和列配置，通过ref函数将其转换为响应式数据。editRow、deleteRow和addRow是处理编辑、删除和新增操作的函数。editRow函数用于编辑表格行数据，首先根据传入的record参数找到对应的数据索引，然后通过prompt函数弹出输入框，获取新的姓名、年龄和地址。如果输入框有值，则更新对应数据的属性值。deleteRow函数用于删除表格行数据，同样根据传入的record参数找到对应的数据索引，然后使用splice方法从数据源中删除该数据。addRow函数用于新增表格行数据，同样使用prompt函数弹出输入框，获取新的姓名、年龄和地址。如果输入框有值，则生成一个新的key值，并将新数据添加到数据源中。整体来说，这段代码实现了一个简单的个人信息表格，并提供了编辑、删除和新增功能。需求实战三效果展示
代码展示
新增
{{ text }} 保存     取消 编辑     删除 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 { 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> = 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); };代码解读这段代码是一个包含表格和编辑功能的Vue组件。主要功能是展示一个包含姓名、年龄、地址等信息的表格，并提供编辑、保存、取消和删除功能。在模板部分，使用了Ant Design Vue组件库的和组件来实现表格和按钮的展示。表格的列定义在columns数组中，每一列都有一个对应的dataIndex属性指定数据源中的字段名，以及一个slots属性指定自定义渲染的插槽名。在数据部分，定义了一个DataItem接口表示表格中的每一行数据，以及一个data数组用于存储所有的数据。通过循环生成了100条测试数据，并将其赋值给dataSource变量。在脚本部分，使用了Vue 3的语法来定义组件的逻辑部分。首先引入了lodash-es库中的cloneDeep函数和Vue的reactive和ref函数。然后定义了一些响应式的变量，包括dataSource用于存储表格数据，editableData用于存储正在编辑的数据，以及count用于生成新数据的键值。接下来定义了一些处理函数，包括handleAdd用于新增数据，edit用于编辑数据，save用于保存编辑后的数据，cancel用于取消编辑，以及onDelete用于删除数据。这些函数通过操作dataSource和editableData来实现相应的功能。最后，将定义的变量和函数导出供模板部分使用。 在黑夜里梦想着光，心中覆盖悲伤，在悲伤里忍受孤独，空守一丝温暖。我的泪水是无底深海，对你的爱已无言，相信无尽的力量，那是真爱永在。我的信仰是无底深海，澎湃着心中火焰，燃烧无尽的力量，那是忠诚永在。