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