欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)為可見(jiàn)
				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)單，可以直接拿來(lái)刪除或修改的按鈕來(lái)用，放在表格上面或下面都行。

<el-button type="primary"  @click="">新增用例</el-button>
<br />	<br />	
<el-table :data="usercases" style="width: 100%" border :key='id'>
	// 其他代碼
</el-table>

為了整體美觀，可以加個(gè)換行。不過(guò)要注意的是，這個(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，在原來(lái)的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)'); // 沒(méi)有將對(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)，沒(méi)有對(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ì)話框還在，但是提交按鈕沒(méi)了。

4、置空對(duì)話框

置空對(duì)話框很重要，不然會(huì)發(fā)現(xiàn)，不管是新增還是修改，不論是取消還是確認(rèn)或提交，只要使用了tempcase，上一次的數(shù)據(jù)都會(huì)殘留在對(duì)話框內(nèi)。根據(jù)不同需求做不同的處理，然而此處，我們要實(shí)現(xiàn)每一次的點(diǎn)擊都是新的開(kāi)始。

我們?cè)谇懊嬉呀?jīng)知道，對(duì)話框里的數(shù)據(jù)是來(lái)自data中的tempcase，那如果要置空tempcase，就得要有tempcase2號(hào)把它的空的值寫(xiě)給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)文章

  • axios請(qǐng)求頭設(shè)置常見(jiàn)Content-Type和對(duì)應(yīng)參數(shù)的處理方式

    axios請(qǐng)求頭設(shè)置常見(jiàn)Content-Type和對(duì)應(yīng)參數(shù)的處理方式

    這篇文章主要介紹了axios請(qǐng)求頭設(shè)置常見(jiàn)Content-Type和對(duì)應(yīng)參數(shù)的處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue下拉菜單組件化開(kāi)發(fā)詳解

    Vue下拉菜單組件化開(kāi)發(fā)詳解

    這篇文章主要為大家詳細(xì)介紹了Vue下拉菜單組件化開(kāi)發(fā)過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯(cuò)位問(wèn)題及解決方法

    VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯(cuò)位問(wèn)題及解決方法

    這篇文章主要介紹了VUE2.0自定義指令與v-if沖突導(dǎo)致元素屬性修改錯(cuò)位問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • 詳解Vue路由自動(dòng)注入實(shí)踐

    詳解Vue路由自動(dòng)注入實(shí)踐

    這篇文章主要介紹了詳解Vue路由自動(dòng)注入實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例

    創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例

    這篇文章主要介紹了創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-12-12
  • 一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)

    一文快速學(xué)會(huì)阻止事件冒泡的4種方法(原生js阻止,vue中使用修飾符阻止)

    冒泡就是事件開(kāi)始是由最具體的元素接收,然后逐層向上級(jí)傳播到較為不具體的元素,這篇文章主要給大家介紹了關(guān)于阻止事件冒泡的4種方法,文中介紹的方法分別是原生js阻止以及vue中使用修飾符阻止的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • vue中this.$router.go(-1)失效(路由改變了，界面未刷新)

    vue中this.$router.go(-1)失效(路由改變了，界面未刷新)

    本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-12-12
  • uniapp一鍵打包H5的詳細(xì)步驟

    uniapp一鍵打包H5的詳細(xì)步驟

    uniapp如何打包到H5并成功發(fā)布,以及在打包過(guò)程中會(huì)遇到的坑如何解決,本文將一一講解,文中通過(guò)圖文結(jié)合的方式給大家講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下
    2024-10-10
  • vue3中sync修飾符的使用詳解

    vue3中sync修飾符的使用詳解

    .sync修飾符是Vue中用于實(shí)現(xiàn)子組件修改父組件傳遞的props值并更新到父組件的功能,它實(shí)際上是一個(gè)語(yǔ)法糖,將子組件的props綁定到一個(gè)名為update:propName的自定義事件上,本文給大家介紹了vue3中sync修飾符的使用,需要的朋友可以參考下
    2023-10-10
  • vue實(shí)現(xiàn)搜索小功能

    vue實(shí)現(xiàn)搜索小功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-11-11

最新評(píng)論