在表格中选中el-radio后, 怎么获取选中的这一行的所有数据?

fury_123

已于 2024-07-09 17:18:59 修改

阅读量393

点赞数 7

文章标签：前端 javascript vue.js

于 2024-07-09 16:44:35 首次发布

本文链接：https://blog.csdn.net/kuang_nu/article/details/140299778

版权

演示:

图中, 选中这行数据后, 怎么获取到当前的数据?

代码:

<tr v-for="item in gridData">
                  <td><input type="radio" v-model="checkout" @change="getDateFn" :data-type="item.articleType" :data-channelName="item.channelName" :data-channelId="item.channelId" :data-code="item.oneline_news_code" :value="item.id || item.articleId"/> </td>

回答:

代码中可以看到, tr中已经使用v-for对gridData数据进行了循环遍历,

下面的radio中,

我们使用:data-channelName='item.channelName', 自己定义了一个data-channelName字段,

通过这个字段获取和存储当前item中的channelName字段,

然后在getDateFn方法中,

我们使用$event.target.getAttribute('data-channelName');

将上面:data-channeName存储的数据赋值给 this.channelName.

getDateFn($event) {
        window.myArticle_type = $event.target.getAttribute('data-type');
        if($event.target.getAttribute('data-code')){
          window.myOneline_news_code = $event.target.getAttribute('data-code');
        }
        console.log($event.target.getAttribute('data-code'))

        // 存储 item.channelName
        this.channelName = $event.target.getAttribute('data-channelName');
        // 存储 item.channelId
        this.channelId = $event.target.getAttribute('data-channelId');