場景

ElementUI中的el-table中實現動態添加一行、刪除一行、清空所有行：

https://mp.csdn.net/console/editor/html/107815187

上面實現的效果如下

?

其中每一行都是動態添加的，每一行對應的是一個對象，每一列對應的是一個對象的屬性。

所以整個el-table綁定的數據源就是一個對象的數組。

但是在頁面上實現時怎樣實現每一列的動態數據綁定。

首先添加一個el-table

??????? <el-tablev-loading="loading":data="bcglXiangXiList":row-class-name="rowClassName"@selection-change="handleDetailSelectionChange"ref="tb"><el-table-column type="selection" width="30" align="center" /><el-table-column label="序號" align="center" prop="xh" width="50"></el-table-column><el-table-column label="開始時間/最早時間-結束時間/最晚時間" width="250" prop="sjfw"><template slot-scope="scope"><el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="開始時間"end-placeholder="結束時間"range-separator="至"clearable@change="changesjfw(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].sjfw"></el-time-picker></template></el-table-column><el-table-column label="指定天數" align="center" prop="ts" width="150"><template slot-scope="scope"><el-selectclearable@change="changezdts(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].ts"><el-optionv-for="dict in zdtsOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template></el-table-column><el-table-column label="打卡地點" align="center" prop="dkdd" width="150"><template slot-scope="scope"><el-selectclearable@change="changedkdd(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].dkdd"><el-optionv-for="dict in dkddOptions":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"/></el-select></template></el-table-column><el-table-column label="最小井下累計時間-最大井下累計時間" width="250" prop="jxsjfw"><template slot-scope="scope"><el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="開始時間"end-placeholder="結束時間"range-separator="至"clearable@change="changejxsjfw(scope.row)"v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"></el-time-picker></template></el-table-column></el-table>

其他代碼解釋見上面博客，這里主要介紹動態綁定這塊。

首先整個表的數據源通過:data="bcglXiangXiList"綁定到一個對象數組。

此數組需要提前聲明

? data() {return {//詳細listbcglXiangXiList: [],

然后在添加每一列時是通過類似于

?v-model="bcglXiangXiList[scope.row.xh-1].sjfw"

這種來進行動態綁定，其中scrope.row就是當前行對象。

scope.row.xh就是當前行的xh列的值，即上面el-table中的第一列

<el-table-column label="序號" align="center" prop="xh" width="50"></el-table-column>

其中此列值的賦值又是通過行的索引+1來獲取。

所以這里就是為什么在進行動態數據綁定時是要拿row.xh-1

因為行號和數組的索引都是從0開始，而我們要展示的序號是從1開始。

那么怎樣才能給xh列設置行號加1那。

通過設置el-table的

:row-class-name="rowClassName"

來實現。

其中rowClassName是回調函數

??? rowClassName({row, rowIndex}) {< BR>row.xh = rowIndex +1;},

其中row是行對象，rowindex是行號，從0開始。

所以這樣就能實現了序號(xv屬性)遞增并且取值為行號加1。

這樣在進行后臺傳遞參數時就能動態獲取多個對象的參數。

注意此時的序號xh是沒法進行動態數據綁定的，所以在傳遞后臺參數時 不要傳遞此參數。

總結

以上是生活随笔為你收集整理的ElementUI中的el-table怎样实现绑定对象数组时每一列不同控件的动态数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。