Vue更改slot-scope=“scope“中的值

业务需求将input中绑定了行内元素的值,添加默认值0,并且可以修改 <el-table-column label="投放数量" align="center" min-width="40" > <template slot-scope="scope"> <el-input
摘要由CSDN通过智能技术生成

业务需求将input中绑定了行内元素的值,添加默认值0,并且可以修改

            <el-table-column
              label="投放数量"
              align="center"
              min-width="40"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.distributionCount"
                  :disabled="!param.receivePointId"
                  class="edit-input"
                  size="mini"
                  @change="abc(scope)"
                />
              </template>
            </el-table-column>

子组件中返回数组数据格式 .由于返回的对象中没有distributionCount我们要的元素,所以我在子组件中添加了一个循环语句对其进行添加

[
	{
   a:'
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vueslot-scope="scope"是用于在父组件访问子组件的数据的一种方式。通过使用slot-scope,我们可以在父组件获取子组件的数据,并进行相应的操作。 具体来说,slot-scope="scope"可以用于以下场景: 1. 在父组件访问子组件的数据:通过scope.row可以获取当前行的数据对象,scope.row.date可以获取当前行数据对象的date属性的。 2. 在父组件访问子组件的索引:通过scope.$index可以获取当前行的索引。 这样,我们可以在父组件根据子组件的数据进行一些逻辑处理或展示。 范例: 假设我们有一个子组件Table,其有一个数据列表dataList,我们想在父组件展示这个列表,并根据每一行的数据进行一些操作。 ```html <!-- 子组件Table --> <template> <table> <tr v-for="(item, index) in dataList" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> <td>{{ item.gender }}</td> <td> <slot :row="item" :$index="index"></slot> </td> </tr> </table> </template> <!-- 父组件 --> <template> <div> <Table :dataList="dataList"> <template slot-scope="scope"> <button @click="deleteRow(scope.$index)">删除</button> </template> </Table> </div> </template> <script> export default { data() { return { dataList: [ { name: 'Alice', age: 20, gender: 'female' }, { name: 'Bob', age: 25, gender: 'male' }, { name: 'Charlie', age: 30, gender: 'male' } ] }; }, methods: { deleteRow(index) { this.dataList.splice(index, 1); } } }; </script> ``` 在上面的例子,我们通过slot-scope="scope"获取到了子组件Table的每一行数据对象和索引,然后在父组件根据这些数据进行了删除操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值