實(shí)現(xiàn)思路：
最近遇到一個(gè)動(dòng)態(tài)增加行和列的需求，本來拿到需求的時(shí)候想用el-table中自帶的方法去實(shí)現(xiàn)的，但是經(jīng)過嘗試發(fā)現(xiàn)不能滿足想要實(shí)現(xiàn)的需求。沒辦法只能在el-table的基礎(chǔ)上自己寫原生。
大概思路如下：
1.首先把table中需要?jiǎng)討B(tài)增加的行和列分開，分別定義一個(gè)數(shù)組dataList存放新增行數(shù)據(jù)，定義數(shù)組columnList存放新增列數(shù)據(jù)。
2.其次在指定列的數(shù)據(jù)前面加新增按鈕，點(diǎn)擊新增按鈕的時(shí)候請(qǐng)求接口拿到數(shù)據(jù)。
3.然后把拿到的數(shù)據(jù)處理，把表格內(nèi)容的數(shù)據(jù)push到dataList中，把表頭內(nèi)容數(shù)據(jù)push到columnList中。注意如果接口沒有返回表頭數(shù)據(jù)，則需要自己根據(jù)具體需求創(chuàng)造對(duì)應(yīng)列的key-value存入columnList中。
(1)行可以直接添加在現(xiàn)有行后面展示，也可以在指定行的后面新增行。比如：在第一行后面新增行，則使用splice添加。splice(指定行,0,添加的新行數(shù)據(jù))
(2)點(diǎn)擊哪行則在哪行后面添加新行。思路：獲取到當(dāng)前點(diǎn)擊行的索引，使用splice添加。splice(指定行,0,添加的新行數(shù)據(jù))
4.最后把dataList給el-table的:data="dataList"使用，columnList給使用
5.以上是新增行和列的思路。如果想刪除行和列的話，則需要通過splice或slice操作dataList和columnList即可。刪除指定的索引位置。
大致代碼如下：

<el-table :data="dataList">
	<el-table-column label="姓名" prop="name"></el-table-column>
	<!--動(dòng)態(tài)列-->
	<el-table-column v-for="(it, index) in columnList" :key="index" :label="it.label">
		<!--動(dòng)態(tài)行-->
		<template slot-scope="scope">
			<i class="el-icon-circle-plus-outline" @click="handleAddRow(scope.row, scope.$index)" />
			<span>{{scope.row.value}}</span>
			// 根據(jù)項(xiàng)目需求進(jìn)行其他邏輯處理
		</template>
	</el-table-column>
</el-table>
export default {
	data() {
		return {
			dataList: [], // 表格數(shù)據(jù)
			columnList: [], //表頭數(shù)據(jù)
		}
	},
	methods: {
		// 動(dòng)態(tài)增加行
		async handleAddRow(row, index) {
			const data = await this.接口()
			data.forEach(d => {
				// 列添加
				this.columnList.push({ label: '年齡' })
				// 行添加
			    this.dataList.splice(index, 0, d)
			})
		}
	}
}

結(jié)語：以上是el-table動(dòng)態(tài)添加行和列的大概思路，大家可以作為參考，再結(jié)合具體需求細(xì)化！??！不足之處請(qǐng)指出，謝謝文章來源地址http://www.zghlxwxcb.cn/news/detail-506323.html

到了這里，關(guān)于【vue】el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！