子組件向父組件傳值 this.$emit 和解決選擇數據後被覆蓋問題

低調的D吖

于 2020-03-30 16:10:34 发布

阅读量208

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/software20121216/article/details/105201577

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

这篇博客介绍了在Vue.js应用中如何将弹出dialog的搜索结果传递给父组件显示，并着重讨论了解决在父组件显示数据时，选择新数据导致已选数据被覆盖的问题。通过在`@selection-change`事件处理函数中调整和在`seleciton`组件上使用`:reserve-selection="true"`属性，成功避免了数据覆盖的情况。

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

將彈出的dailog 搜索得到的數據傳給父組件

//子組件
<el-table ref="filterTable" :key="tableKey" v-loading="listLoading" :data="pagination.items" fit highligh-current-row :element-loading-text="$t('commonText.loadingText')" style="width:100%;" @selection-change="handleSelectionChange" @row-click="clickRow">
        <el-table-column label="goodsNo“ prop="goodsNo">
          <template slot-scope="{row}">
            <span>
              {{ row.goodsNo }}
              <!--goodsID-->
            </span>
          </template>
        </el-table-column>
          <el-table-column label="operate" property="operate" type="selection" width="55px">
        <!--    selection -->
</el-table>



    handleSelectionChange(val) {
      this.all
      this.multipleSelection = val
      this.$emit('selectCheckboxData', this.multipleSelection)
      console.log(val)
    },

//父組件
//註冊子組件並使用

<cpn @selectCheckboxData="updateData" ></cpn>





updateData(data) {
      this.goodsData = data
      console.log('-----', data)
    },

這樣就實現了將子組件的值傳給了父組件顯示出來

在期間遇到了一些問題

比如在父組件把數據顯示的時候

選中後要增加第二條數據會被覆蓋掉應該和@selection-change="handleSelectionChange" 有關係待完善-->解決方式

只需要在seleciton 加入 :reserve-selection="true"