v-for循环向slot传值(iview表格内容可编辑)

最新推荐文章于 2025-03-31 18:10:20 发布

qq_43469899

最新推荐文章于 2025-03-31 18:10:20 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue iview 文章标签： iview表格可编辑 v-for循环向slot传值

本文链接：https://blog.csdn.net/qq_43469899/article/details/103488827

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

iview

5 篇文章

订阅专栏

本文分享了一个使用Vue的v-for循环向slot传递值来实现iview表格内容可编辑的实例。在模板中使用v-for时，遇到不加key属性会报错的问题，但实际运行时加了key会导致错误。目前尚无解决不报红的方法，欢迎知道解决方案的读者提供帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编今天做了一个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="selectedCell.rowIndex === index && selectedCell.columnIndex === column.slot" @keyup.enter.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的属性!
其余的自己发挥一下,我这边主要是实现iview的table表格可以编辑的功能!