ElementUI中的el-table怎样实现绑定对象数组时每⼀列不同控件的动态数据
绑定
场景
ElementUI中的el-table中实现动态添加⼀⾏、删除⼀⾏、清空所有⾏：
上⾯实现的效果如下
其中每⼀⾏都是动态添加的，每⼀⾏对应的是⼀个对象，每⼀列对应的是⼀个对象的属性。
所以整个el-table绑定的数据源就是⼀个对象的数组。
但是在页⾯上实现时怎样实现每⼀列的动态数据绑定。
⾸先添加⼀个el-table
<el-table
v-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-picker
is-range
format="HH:mm"
value-format="HH:mm"
:
start-placeholder="开始时间"
end-placeholder="结束时间"
range-separator="⾄"
clearable
@change="w)"
v-model="w.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-select
clearable
@change="w)"
v-model="w.xh-1].ts"
>
<el-option
v-for="dict in zdtsOptions"
springcloud怎么读音: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-select
clearable
@change="w)"
v-model="w.xh-1].dkdd"
>
<el-option
v-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-picker
is-range
format="HH:mm"
value-format="HH:mm"
:
start-placeholder="开始时间"
end-placeholder="结束时间"
range-separator="⾄"
clearable
@change="w)"
v-model="w.xh-1].jxsjfw"
></el-time-picker>
</template>
</el-table-column>
</el-table>
其他代码解释见上⾯博客，这⾥主要介绍动态绑定这块。
⾸先整个表的数据源通过:data="bcglXiangXiList"绑定到⼀个对象数组。
此数组需要提前声明
data() {
return {
//详细list
bcglXiangXiList: [],
然后在添加每⼀列时是通过类似于
v-model="w.xh-1].sjfw"
这种来进⾏动态绑定，其中w就是当前⾏对象。
<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是没法进⾏动态数据绑定的，所以在传递后台参数时不要传递此参数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。