vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
更新時(shí)間：2023年12月22日 11:32:54 作者：程序酷巴戈
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
【需求】實(shí)現(xiàn)表格增加行數(shù)據(jù)。
<template>
<el-table :data="usercases" style="width: 100%" border :key='id'>
<el-table-column fixed prop="id" label="ID" width="50" />
<el-table-column prop="name" label="接口名" width="280" />
<el-table-column prop="tester" label="測(cè)試人員" width="120" />
<el-table-column prop="project" label="項(xiàng)目" width="200" />
<el-table-column prop="project_id" label="項(xiàng)目ID" width="120" />
<el-table-column prop="desc" label="描述" width="200" />
<el-table-column prop="create_time" label="創(chuàng)建時(shí)間" width="200" />
<el-table-column prop="testcases" label="用例數(shù)" width="100" />
<el-table-column fixed="right" label="操作" width="120">
<template #default="{row}">
<el-button link type="primary" size="small" @click="deleteButton(row)">刪除</el-button>
<el-button link type="primary" size="small" @click='editCase(row)'>修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 編輯對(duì)話框 -->
<el-dialog v-model="editDialogVisible" title="編輯案例">
<el-form v-model="tempcase">
<el-form-item label="ID" :label-width="formLabelWidth" readonly>
<el-input v-model="tempcase.id" autocomplete="off" />
</el-form-item>
<el-form-item label="接口名" :label-width="formLabelWidth">
<el-input v-model="tempcase.name" autocomplete="off" />
</el-form-item>
<el-form-item label="測(cè)試人員" :label-width="formLabelWidth">
<el-input v-model="tempcase.tester" autocomplete="off" />
</el-form-item>
<el-form-item label="項(xiàng)目" :label-width="formLabelWidth">
<el-input v-model="tempcase.project" autocomplete="off" />
</el-form-item>
<el-form-item label="項(xiàng)目ID" :label-width="formLabelWidth">
<el-input v-model="tempcase.project_id" autocomplete="off" />
</el-form-item>
<el-form-item label="描述" :label-width="formLabelWidth">
<el-input v-model="tempcase.desc" autocomplete="off" />
</el-form-item>
<el-form-item label="創(chuàng)建時(shí)間" :label-width="formLabelWidth">
<el-input v-model="tempcase.create_time" autocomplete="off" />
</el-form-item>
<el-form-item label="用例數(shù)" :label-width="formLabelWidth">
<el-input v-model="tempcase.testcases" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelSubmit">取消</el-button>
<el-button type="primary" @click="confirmEdit">確認(rèn)</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import {
ElMessage,
ElMessageBox
} from 'element-plus'
export default {
data() {
return {
usercases: [{
id: 1,
name: "查看項(xiàng)目列表接口_INlove即時(shí)通訊項(xiàng)目",
tester: "酷巴戈",
project: "INlove即時(shí)通訊項(xiàng)目",
project_id: 2,
desc: "",
create_time: "2023-11-06 17:22:50",
testcases: 1
},
{
id: 2,
name: "登錄接口_自動(dòng)化測(cè)試平臺(tái)項(xiàng)目",
tester: "csdn",
project: "自動(dòng)化測(cè)試平臺(tái)項(xiàng)目",
project_id: 1,
desc: "登錄接口",
create_time: "2023-12-06 14:50:30",
testcases: 9
}
],
tempcase: {
id: null,
name: "",
tester: "",
project: "",
project_id: null,
desc: "",
create_time: "",
testcases: null
},
editDialogVisible: false,
}
},
methods: {
deleteButton(row) {
ElMessageBox.confirm(
'是否確認(rèn)刪除',
'提醒', {
confirmButtonText: '確認(rèn)',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.usercases = this.usercases.filter((item) => item !== row);
ElMessage({
type: 'success',
message: '刪除成功',
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '刪除取消',
})
})
},
cancelSubmit(){
this.editDialogVisible = false;
},
editCase(row) {
// 將編輯用例的對(duì)話框設(shè)為可見
this.editDialogVisible = true;
// 將當(dāng)前行的數(shù)據(jù)賦值給 tempcase，這樣對(duì)話框中的表單就會(huì)顯示當(dāng)前行的值
this.tempcase = {
...row
};
},
confirmEdit() {
const index = this.usercases.findIndex((item) => item.id === this.tempcase.id); //能找到就返回正常的索引id，找不到就返回-1
if (index !== -1) {
this.usercases.splice(index, 1, {
...this.tempcase
});
// 提示編輯成功
ElMessage.success('編輯成功');
// 關(guān)閉編輯對(duì)話框
this.editDialogVisible = false;
} else {
ElMessage.error('未找到相應(yīng)項(xiàng)');
}
}
},
}
</script>
<style scoped>
</style>【分析需求】
實(shí)現(xiàn)增加數(shù)據(jù)行，那需要準(zhǔn)備這些功能：
- 一個(gè)新增case的按鈕
- 一個(gè)對(duì)話框，對(duì)話框須支持input，且原始輸入框?yàn)榭盏?/li>
- 單擊保存后能保存數(shù)據(jù)對(duì)象到usercases里面
- 再次觸發(fā)新增case按鈕的時(shí)候，輸入框是空的
【處理需求】
1、新增case按鈕
按鈕很簡(jiǎn)單，可以直接拿來刪除或修改的按鈕來用，放在表格上面或下面都行。
<el-button type="primary" @click="">新增用例</el-button> <br /> <br /> <el-table :data="usercases" style="width: 100%" border :key='id'> // 其他代碼 </el-table>
為了整體美觀，可以加個(gè)換行。不過要注意的是，這個(gè)按鈕是放在表格外的。
2、對(duì)話框：輸入框?yàn)榭?/h3>
這個(gè)和修改按鈕的處理很像。只是修改按鈕要求點(diǎn)擊的事件能夠帶出數(shù)據(jù)，而新增按鈕要求點(diǎn)擊的事件是不帶出事件。仔細(xì)一看修改的單擊事件指向的方法傳遞了row值，那新增這塊不傳遞不就可了？
// 在methods中加入方法，并在 按鈕的單擊事件綁定這個(gè)方法@click="addCase"
addCase() {
this.editDialogVisible = true;
},3、保存數(shù)據(jù)
預(yù)覽效果發(fā)現(xiàn)，倒是能彈出對(duì)話框了，怎么點(diǎn)擊確認(rèn)，會(huì)報(bào)錯(cuò)呢？
仔細(xì)看代碼，可以發(fā)現(xiàn)，這個(gè)對(duì)話框的確認(rèn)按鈕，我們?cè)诙x修改用例的時(shí)候，已經(jīng)給它設(shè)置了規(guī)則。因?yàn)椴还茌斎胧裁磧?nèi)容，index返回的都是-1，在原來的usercases里面找不到id，所以才報(bào)錯(cuò)。
confirmEdit() {
const index = this.usercases.findIndex((item) => item.id === this.tempcase.id);
if (index !== -1) {
this.usercases.splice(index, 1, {
...this.tempcase
});
ElMessage.success('編輯成功');
this.editDialogVisible = false;
} else {
ElMessage.error('未找到相應(yīng)項(xiàng)');
}
},因此，我們需要定義一個(gè)屬于增加用例的【確認(rèn)按鈕】，但在同一個(gè)對(duì)話框內(nèi)，顯示三個(gè)按鈕，兩個(gè)都是提交的，這樣顯然不太合理。
如果簡(jiǎn)單地解決，可以使用v-show：
- 從addCase進(jìn)入的對(duì)話框，就顯示【提交】
- 從editCase，就顯示【確認(rèn)】
那么，我們需要對(duì)這兩個(gè)按鈕也做一個(gè)可視化的處理。
// 其他數(shù)據(jù)
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="cancelSubmit">
取消
</el-button>
<el-button @click="confirmEdit" v-show="confirmEditVisiable">確認(rèn)編輯</el-button>
<el-button @click="confirmAdd" v-show="confirmAddVisiable">提交</el-button>
</span>
</template>
// 其他數(shù)據(jù)
<script>
export default {
data() {
return {
// 其他數(shù)據(jù)
editDialogVisible: false,
confirmAddVisiable: false,
confirmEditVisiable: false,
}
},
methods: {
// 其他代碼
cancelSubmit() {
this.editDialogVisible = false; // 取消，不顯示對(duì)話框
this.confirmAddVisiable = false; // 不顯示確認(rèn)按鈕
this.confirmEditVisiable = false; // 不顯示提交按鈕
},
editCase(row) {
this.editDialogVisible = true; // 單擊修改按鈕，顯示對(duì)話框，顯示確認(rèn)按鈕
this.confirmEditVisiable = true;
this.tempcase = {
...row
};
}，
confirmEdit() {
const index = this.usercases.findIndex((item) => item.id === this.tempcase.id);
if (index !== -1) {
this.usercases.splice(index, 1, {
...this.tempcase
});
this.confirmEditVisiable = false; // 編輯成功，不顯示確認(rèn)按鈕
ElMessage.success('編輯成功');
this.editDialogVisible = false;
} else {
ElMessage.error('未找到相應(yīng)項(xiàng)'); // 沒有將對(duì)話框和確認(rèn)按鈕的值修改，則是維持為true的狀態(tài)
}
},
addCase() {
this.editDialogVisible = true; // 單擊新增按鈕，顯示對(duì)話框，顯示提交按鈕
this.confirmAddVisiable = true; // 因?yàn)樵谏弦徊降娜∠?，已?jīng)定義確認(rèn)按鈕為false不顯示的狀態(tài)，所以此時(shí)不會(huì)出現(xiàn)確認(rèn)和提交并存的狀態(tài)
},
confirmAdd() {
this.confirmAddVisiable = false; // 提交成功，不顯示確認(rèn)按鈕
this.usercases.push({
...this.tempcase
});
this.editDialogVisible = false;
ElMessage({
type: 'success',
message: '提交成功',
});
},
},
}
</script>
預(yù)覽效果可以發(fā)現(xiàn)，沒有對(duì)輸入框做校驗(yàn)，導(dǎo)致會(huì)生成很多一樣的數(shù)據(jù)，這個(gè)肯定是需要修改的。
可以直接在addCase中添加一個(gè)基本的校驗(yàn)條件：
confirmAdd() {
if (this.isValidInput()) {
// this.updateCurrentTime();
this.cases.push({
...this.tempcase
});
this.editDialogVisible = false;
this.confirmAddVisiable = false;
ElMessage({
type: 'success',
message: '提交成功',
});
} else {
ElMessage.error('請(qǐng)檢查輸入項(xiàng)是否完整！')
}
},
isValidInput() {
return (
this.tempcase.id !== null &&
this.tempcase.name !== '' &&
this.tempcase.tester !== '' &&
this.tempcase.project !== '' &&
this.tempcase.project_id !== null &&
this.tempcase.create_time != '' &&
this.tempcase.testcases !== null
)
},一定要注意，this.confirmAddVisiable = false; 要發(fā)生在提交成功后，不然就會(huì)像這樣，對(duì)話框還在，但是提交按鈕沒了。
4、置空對(duì)話框
置空對(duì)話框很重要，不然會(huì)發(fā)現(xiàn)，不管是新增還是修改，不論是取消還是確認(rèn)或提交，只要使用了tempcase，上一次的數(shù)據(jù)都會(huì)殘留在對(duì)話框內(nèi)。根據(jù)不同需求做不同的處理，然而此處，我們要實(shí)現(xiàn)每一次的點(diǎn)擊都是新的開始。
我們?cè)谇懊嬉呀?jīng)知道，對(duì)話框里的數(shù)據(jù)是來自data中的tempcase，那如果要置空tempcase，就得要有tempcase2號(hào)把它的空的值寫給tempcase。
第一步：先定義一個(gè)tempcase2號(hào)，然后賦值給tempcase。
resetTempCase() {
return this.tempcase = this.getEmptyTempCase()
},
getEmptyTempCase() {
return {
id: null,
name: "",
tester: "",
project: "",
project_id: null,
desc: "",
create_time: "",
testcases: null,
}
},第二步：調(diào)用置空方法。
在哪里調(diào)用呢？很明顯，在對(duì)話框下一次展示之前就需要置空，也就是在對(duì)話框關(guān)閉的時(shí)候，需要同時(shí)清除上一次保存在tempcase中的數(shù)據(jù)。
<template>
// 其他代碼
</template>
<script>
export default {
// 其他代碼
methods: {
// 其他代碼
cancelSubmit() {
// 其他代碼
this.resetTempCase(); // 取消置空tempcase
},
confirmEdit() {
if (index !== -1) {
// 其他代碼
this.resetTempCase(); // 確認(rèn) 置空tempcase
} else {
ElMessage.error('未找到相應(yīng)項(xiàng)');
}
},
confirmAdd() {
this.confirmAddVisiable = false;
if (this.isValidInput()) {
// 其他代碼
this.resetTempCase(); // 提交 置空tempcase
} else {
ElMessage.error('請(qǐng)檢查輸入項(xiàng)是否完整！')
}
},
},
}
</script>
<style scoped>
</style>【完整代碼】
<template>
<el-button type="primary" @click="addCase">新增用例</el-button>
<br /> <br />
<el-table :data="usercases" style="width: 100%" border :key='id'>
<el-table-column fixed prop="id" label="ID" width="50" />
<el-table-column prop="name" label="接口名" width="280" />
<el-table-column prop="tester" label="測(cè)試人員" width="120" />
<el-table-column prop="project" label="項(xiàng)目" width="200" />
<el-table-column prop="project_id" label="項(xiàng)目ID" width="120" />
<el-table-column prop="desc" label="描述" width="200" />
<el-table-column prop="create_time" label="創(chuàng)建時(shí)間" width="200" />
<el-table-column prop="testcases" label="用例數(shù)" width="100" />
<el-table-column fixed="right" label="操作" width="120">
<template #default="{row}">
<el-button link type="primary" size="small" @click="deleteButton(row)">刪除</el-button>
<el-button link type="primary" size="small" @click='editCase(row)'>修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 編輯對(duì)話框 -->
<el-dialog v-model="editDialogVisible" title="編輯案例">
<el-form v-model="tempcase">
<el-form-item label="ID" :label-width="formLabelWidth" readonly>
<el-input v-model="tempcase.id" autocomplete="off" />
</el-form-item>
<el-form-item label="接口名" :label-width="formLabelWidth">
<el-input v-model="tempcase.name" autocomplete="off" />
</el-form-item>
<el-form-item label="測(cè)試人員" :label-width="formLabelWidth">
<el-input v-model="tempcase.tester" autocomplete="off" />
</el-form-item>
<el-form-item label="項(xiàng)目" :label-width="formLabelWidth">
<el-input v-model="tempcase.project" autocomplete="off" />
</el-form-item>
<el-form-item label="項(xiàng)目ID" :label-width="formLabelWidth">
<el-input v-model="tempcase.project_id" autocomplete="off" />
</el-form-item>
<el-form-item label="描述" :label-width="formLabelWidth">
<el-input v-model="tempcase.desc" autocomplete="off" />
</el-form-item>
<el-form-item label="創(chuàng)建時(shí)間" :label-width="formLabelWidth">
<el-input v-model="tempcase.create_time" autocomplete="off" />
</el-form-item>
<el-form-item label="用例數(shù)" :label-width="formLabelWidth">
<el-input v-model="tempcase.testcases" autocomplete="off" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancelSubmit">取消</el-button>
<el-button type="primary" @click="confirmEdit" v-show='confirmEditVisiable'>確認(rèn)</el-button>
<el-button type="primary" @click="confirmAdd" v-show='confirmAddVisiable'>提交</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import {
ElMessage,
ElMessageBox
} from 'element-plus'
export default {
data() {
return {
usercases: [{
id: 1,
name: "查看項(xiàng)目列表接口_INlove即時(shí)通訊項(xiàng)目",
tester: "酷巴戈",
project: "INlove即時(shí)通訊項(xiàng)目",
project_id: 2,
desc: "",
create_time: "2023-11-06 17:22:50",
testcases: 1
},
{
id: 2,
name: "登錄接口_自動(dòng)化測(cè)試平臺(tái)項(xiàng)目",
tester: "csdn",
project: "自動(dòng)化測(cè)試平臺(tái)項(xiàng)目",
project_id: 1,
desc: "登錄接口",
create_time: "2023-12-06 14:50:30",
testcases: 9
}
],
tempcase: {
id: null,
name: "",
tester: "",
project: "",
project_id: null,
desc: "",
create_time: "",
testcases: null
},
editDialogVisible: false,
confirmAddVisiable: false,
confirmEditVisiable: false,
}
},
methods: {
deleteButton(row) {
ElMessageBox.confirm(
'是否確認(rèn)刪除',
'提醒', {
confirmButtonText: '確認(rèn)',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
this.usercases = this.usercases.filter((item) => item !== row);
ElMessage({
type: 'success',
message: '刪除成功',
})
})
.catch(() => {
ElMessage({
type: 'info',
message: '刪除取消',
})
})
},
cancelSubmit() {
this.editDialogVisible = false;
this.confirmAddVisiable = false;
this.confirmEditVisiable = false;
this.resetTempCase();
},
editCase(row) {
this.editDialogVisible = true;
this.confirmEditVisiable = true;
this.tempcase = {
...row
};
},
confirmEdit() {
const index = this.usercases.findIndex((item) => item.id === this.tempcase.id);
if (index !== -1) {
this.usercases.splice(index, 1, {
...this.tempcase
});
this.confirmEditVisiable = false;
ElMessage.success('編輯成功');
this.editDialogVisible = false;
this.resetTempCase();
} else {
ElMessage.error('未找到相應(yīng)項(xiàng)');
}
},
addCase() {
this.editDialogVisible = true;
this.confirmAddVisiable = true;
},
confirmAdd() {
this.confirmAddVisiable = false;
if (this.isValidInput()) {
this.cases.push({
...this.tempcase
});
this.editDialogVisible = false;
ElMessage({
type: 'success',
message: '提交成功',
});
this.resetTempCase();
} else {
ElMessage.error('請(qǐng)檢查輸入項(xiàng)是否完整！')
}
},
isValidInput() {
return (
this.tempcase.id !== null &&
this.tempcase.name !== '' &&
this.tempcase.tester !== '' &&
this.tempcase.project !== '' &&
this.tempcase.project_id !== null &&
// this.tempcase.create_time != '' &&
this.tempcase.testcases !== null
)
},
resetTempCase() {
return this.tempcase = this.getEmptyTempCase()
},
getEmptyTempCase() {
return {
id: null,
name: "",
tester: "",
project: "",
project_id: null,
desc: "",
create_time: "",
testcases: null,
}
},
},
}
</script>
<style scoped>
.el-button--text {
margin-right: 15px;
}
.el-select {
width: 300px;
}
.el-input {
width: 300px;
}
.dialog-footer button:first-child {
margin-right: 10px;
}
.demo-datetime-picker {
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
.demo-datetime-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-datetime-picker .block:last-child {
border-right: none;
}
</style>以上就是vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于vue element-plus表格增加的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vuex是一個(gè)專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個(gè)集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲(chǔ)在一個(gè)單獨(dú)的地方。這使得狀態(tài)的管理和維護(hù)變得更加容易2023-03-03
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue-cli3.0如何修改端口號(hào)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼
在使用Vue的場(chǎng)景下,需要實(shí)現(xiàn)對(duì)元素進(jìn)行拖動(dòng)交換位置,接下來通過本文給大家介紹vue實(shí)現(xiàn)元素拖動(dòng)并互換位置的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-09-09
在vue3中,如果你用reactive聲明了一個(gè)對(duì)象,用另一個(gè)對(duì)象直接給它賦值,那么它就會(huì)失去響應(yīng)式,下面這篇文章主要給大家介紹了關(guān)于Vue3中reactive丟失響應(yīng)式問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue項(xiàng)目中路徑使用@和~的區(qū)別及說明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
Vue3?封裝一個(gè)支持輸入和單/多選InputSelect組件-Antd詳解
Antd的Select組件默認(rèn)不支持作為輸入框使用或手動(dòng)添加選項(xiàng),為了實(shí)現(xiàn)這一功能,我們封裝了一個(gè)通用組件,支持單選和多選模式,并允許用戶在組件失焦時(shí)手動(dòng)輸入選項(xiàng),主要通過定義searchText存儲(chǔ)輸入數(shù)據(jù),感興趣的朋友跟隨小編一起看看吧2024-09-09
解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問題
這篇文章主要介紹了解決router.beforeEach()動(dòng)態(tài)加載路由出現(xiàn)死循環(huán)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10