element UI-单选(el-radio)增加取消功能

记录调试增加el-radio的取消功能

1.为单选加click事件

2.在方法中进行判断,同时进行逻辑处理

3. 方法很简单,注意思考

1)单选控件首先记录一个下标

2)点击一条记录时,先获取下标,然后与先前记录的下标比较。

如果值相等,则表示是第二次点击该记录,需将下标重置为初始值(代码设置初始值100,是因为每页最多10条记录);

如果值不相等,则表示第一次点击该记录,需将获取的下标赋值给定义的变量

3)其实就是个三目运算,但是没成功,所以写成了if-else

第一步:
      <el-table
        border
        v-loading="loading"
        :element-loading-text="loadingText"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        size="small"
      >
        <el-table-column width="30">
          <template slot-scope="scope">
            <el-radio :label="scope.$index" v-model="radio" @click.native.stop.prevent="selectRadio(scope.$index, $event)"></el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="60px" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
第二步:
    selectRadio (index, e) {
      console.log('1this.radio;;;;', this.radio)
      console.log('1index;;;;', index)
      if (index === this.radio) {
        this.radio = 100
      } else {
        this.radio = index
      }
      console.log('2this.radio;;;;', this.radio)
      console.log('2index;;;;', index)
    },


data中添加属性
  data () {
    return {
      radio: 0
    }
   }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值