问答

element-ui el-checkbox 如何获取当前选中行的数据

作者:admin 2021-07-23 我要评论

el-checkbox-group v-model="checkAll" @change="handleCheckChange" el-checkbox v-for="(item, index) in list" :label="item" {{item.label}}/el-checkbox/el...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<el-checkbox-group v-model="checkAll" @change="handleCheckChange">
    <el-checkbox
        v-for="(item, index) in list"
        :label="item"
     >{{item.label}}</el-checkbox>
</el-checkbox-group>





export default {
    data(){
        return {
            checkAll: [],
            list:[
                {
                    id: '1',
                    label: 'test1'
                },
                {
                    id: '2',
                    label: 'test2'
                },
                {
                    id: '3',
                    label: 'test3'
                }
            ]
        }
    },
    methods: {
        handleCheckChange(val) {
            console.log(val)
        }
    }
}

如代码所示,我点击多选框勾选的时候,只能获取已经选中的多条数据,怎样做才能同时获取到我当前点击的一条数据呢?

###

https://codepen.io/ciaozz/pen...

<el-checkbox-group v-model="checkAll" @change="handleCheckChange">
    <el-checkbox @change="test(item)" v-for="(item, index) in list" :label="item">
        {{item.label}}
    </el-checkbox>
</el-checkbox-group>

直接在change事件中把item作为参数传进去,然后在函数中就能获取了

test(myVal) {
      console.log(myVal);
    }
###

image.png
city是数据,$event是状态

###

watch checkAll,根据 newValue 和 oldValue 的差别,就知道最新变化的那项

###

image.png
既能获取当前选中行的数据,又能拿到当前行的数据及索引

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • element-ui el-checkbox  如何获取当前

    element-ui el-checkbox 如何获取当前

  • IOS选中相册后的回调方法不执行

    IOS选中相册后的回调方法不执行

  • Docker中的 `run -itd` 和 `run -it`

    Docker中的 `run -itd` 和 `run -it`

  • json里面能使用变量吗?

    json里面能使用变量吗?

腾讯云代理商
海外云服务器