實(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ì)化?。?！

補(bǔ)充：vue實(shí)現(xiàn)el-table表頭自定義

Vue.js 是一個(gè)流行的JavaScript框架，它的數(shù)據(jù)綁定和組件化特性使得開發(fā)動(dòng)態(tài)Web應(yīng)用變得更加容易。其中，強(qiáng)大的UI組件庫(kù)（如Element，iView等）能夠極大地提高Web應(yīng)用開發(fā)效率。而el-table是一種用于展示表格數(shù)據(jù)的組件，它擁有可排序、過濾、分頁(yè)等多種功能。本文主要介紹如何使用Vue.js實(shí)現(xiàn)el-table表頭自定義。

在Vue.js中使用el-table組件時(shí)，表頭（thead）用于顯示列名和控制排序、過濾等操作。默認(rèn)情況下，el-table組件根據(jù)數(shù)據(jù)源中的列名自動(dòng)生成表頭。若需自定義表頭，可通過以下方式實(shí)現(xiàn)：

• 使用el-table-column組件

在el-table中使用el-table-column組件可以實(shí)現(xiàn)自定義表頭。具體操作如下：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

上述代碼中，我們?yōu)閑l-table添加了三個(gè)el-table-column組件，分別對(duì)應(yīng)表格中的三列數(shù)據(jù)。同時(shí)，我們?cè)诿總€(gè)el-table-column組件上指定了prop和label屬性，其中prop屬性指定了對(duì)應(yīng)的數(shù)據(jù)源中的字段名，label屬性指定了表頭標(biāo)題。

• 使用Scoped Slots

如果需要實(shí)現(xiàn)更加復(fù)雜的表頭，可以使用Scoped Slots進(jìn)行自定義。具體操作如下：

<el-table :data="tableData">
  <template slot="header">
    <el-row>
      <el-col :span="8">日期</el-col>
      <el-col :span="8">姓名</el-col>
      <el-col :span="8">地址</el-col>
    </el-row>
  </template>
  <el-table-column prop="date"></el-table-column>
  <el-table-column prop="name"></el-table-column>
  <el-table-column prop="address"></el-table-column>
</el-table>

上述代碼中，我們使用了el-table的header slot，它可以讓我們自定義表頭，即在表頭中添加任意HTML代碼。在header slot中我們使用了el-row和el-col組件創(chuàng)建了一個(gè)表頭行，然后通過span屬性設(shè)置每列所占的寬度，最終實(shí)現(xiàn)了自定義表頭。

到此這篇關(guān)于vue el-table實(shí)現(xiàn)動(dòng)態(tài)添加行和列的文章就介紹到這了,更多相關(guān)el-table動(dòng)態(tài)添加行和列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論