博客推行版本更新，成果積累制度，已經寫過的博客還會再次更新，不斷地琢磨，高質量高數量都是要追求的，工匠精神是學習必不可少的精神。因此，大家有何建議歡迎在評論區踴躍發言，你們的支持是我最大的動力，你們敢投，我就敢肝 ...
需求實戰一
效果展示
代碼展示
<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>
