vant 复选,选中一个其他置灰不可选,取消后再次变成可复选

html

<div v-for="(item, index) in resultList" :key="index" class="flView">

            <van-checkbox-group v-model="result" direction="horizontal">

              <van-checkbox

                :name="item.value"

                @click="checkClick(result)"

                :disabled="item.disabled"

                >{{ item.name }}</van-checkbox

              >

            </van-checkbox-group>

          </div>

data() {

    return {

      result: [],

      resultList: [

        { name: '复选1', value: '1', disabled: false },

        { name: '复选2', value: '2', disabled: false },

      ],

}

}

checkClick(e) {
     if (e == '1') {
        this.resultList[1].disabled = true
    
      }
      if (e == '2') {
        this.resultList[0].disabled = true
        
      }
     if (e == '') {
        this.resultList.forEach(item => {
          item.disabled = false
        })
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要获取 Vant 复选框(Checkbox)勾选中的哪一行的值,你可以借助 Vue.js 的双向绑定和事件监听来实现。 首先,你需要在 Vue 实例的 data 中定义一个数组用于存储选中的行的值。例如: ```javascript data() { return { selectedRows: [] // 用于存储选中的行的值 } } ``` 接下来,在复选框组件中,你需要使用 v-model 指令将选中状态绑定到一个计算属性,并在复选框组件上添加一个 change 事件监听器。例如: ```html <van-checkbox v-model="selectedRows" @change="handleCheckboxChange(rowData)"> <!-- 复选框的内容 --> </van-checkbox> ``` 在上述代码中,我们将复选框的选中状态绑定到 `selectedRows` 数组,并在复选框上添加了一个 `change` 事件监听器,调用 `handleCheckboxChange` 方法,并传递当前行的数据 `rowData`。 最后,在 Vue 实例中定义 `handleCheckboxChange` 方法,用于处理复选框勾状态的改变。在该方法中,你可以根据需要对选中取消选中的行进行相应的处理。例如: ```javascript methods: { handleCheckboxChange(rowData) { if (this.selectedRows.includes(rowData)) { // 取消选中 // 在这里可以进行相应的操作,比如从 selectedRows 数组中移除该行的值 const index = this.selectedRows.indexOf(rowData); if (index > -1) { this.selectedRows.splice(index, 1); } } else { // 选中 // 在这里可以进行相应的操作,比如将该行的值添加到 selectedRows 数组中 this.selectedRows.push(rowData); } } } ``` 在上述代码中,我们通过判断 `selectedRows` 数组中是否包含当前行的数据 `rowData`,来决定是取消选中还是选中。根据需要,你可以在相应的分支中进行处理。 通过以上的代码,你就可以获取到 Vant 复选框勾选中的哪一行的值,并根据需要进行相应的操作。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值