office97v-for循环向slot传值（iview表格内容可编辑） ⼩编今天做了⼀个v-for循环向slot传值的实例.现在贴出来给⼤家⼀起分享⼀下
<Table :width="contentWidth" :max-height="contentHeight-80" :columns="tableColumns" :data="tableData" border>
滨州医学院图书馆<template slot-scope="{ row }" slot="fymc">
<span :class="titleTextClass[row.level-1]">{{ row.fymc }}</span>
</template>
<template slot-scope="{ row,column,index }" :slot="item.slot" v-for="(item,index) in tableColumns.slice(1)">
<InputNumber v-model="tableData[index][column.slot]" v-if="wIndex === index && lumnIndex === column.slot" @native="initSelectedCell()"/>
<div v-else>
<span>{{ row[item.slot] }}</span>
<i @click="editCellData(row,column,index)" class="iconfont icon-edit table-cell-icon"></i>
</div>
</template>
</Table>
忽略掉我代码中的多余属性哈，只看v-for循环和slot内的属性值! 塞林格九故事
博主这边使⽤的是:template 相信还很多⼈会困惑使⽤v-for不加key属性不会报红么，确实博主报红了,⼤家通过实践可以发现要是加key你就会直接运⾏报错，后⾯⼩编查资料显⽰v-for在template 是不允许出现key属性的，暂时还没到办法解决报红问题!如果有解决了的⿇烦告知⼀下⼩编哈!汉德森
当然我说的不是这个问题：接下来请看tableColumns数组
tableColumns: [{
title: '费⽤名称',
slot: 'fymc',
width:300
},
{
title: "批复预算⾦额",
slot: "pfysje"
},
{
吉林体育学院学报title: '预算⾦额',
slot: 'ysje'
},
{
title: '完成⼯程量',
slot: 'wcgcl'
},
{
title: '拨付⾦额',
slot: 'bfje'
}
],```
接下来我逐个给⼤家解释哈:
v-for⾥⾯⾃然是遍历数组⾥⾯的数据这个不多说
:
slot:⾥⾯放的是上⾯数组⾥⾯的所有slot的属性值
v-model：绑定的是你输⼊的每个值
(item,index) in tableColumns.slice(1)：这边.slice(1)是因为我不想让它编辑我的第⼀栏，你们根据⾃⼰需求修改
特别注意:
row[item.slot]：这边是中括号不是. 你的row⾥⾯是没有item属性的，只有item.slot的属性!
cs4281其余的⾃⼰发挥⼀下，我这边主要是实现iview的table表格可以编辑的功能!
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议