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

小围巾儿
  • 25
<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)
        }
    }
}

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

回复
阅读 11.1k
4 个回答
✓ 已被采纳

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 的差别,就知道最新变化的那项

wjh777
  • 2
新手上路,请多包涵

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

宣传栏