element-ui中的radios按钮（带输入框）怎么做到取消的操作？

需求：突然客户提了个需求，想在原来的系统上做一个这样的操作，就是可以取消选中的单选按钮，我当时心里想，( 你不要选不就完了吗？但是我不能这样说)。我就说下来看看可以做不。

查文档：查了一下radios的文档，发现它只绑定了change事件，如果想做点击取消的效果，肯定是用不了的，只能用click事件。就加上了试试看。首先是加了不起效果，需要添加native绑定原生事件，将radios的label值作为参数传递过去，如果点击的是同一个按钮，就在队列里面添加一个事件，等所有的同步事件处理完成之后，在处理异步的事件，就是写在定时器里面的内容。可以给radios藜麦赋值为不一样的值，就会有取消的效果，但是需要和后端协商一下，传递的数据的格式，是不是要保留一些固定的格式，val值传递什么值。

0.组件里面的元素有可能使用不了事件修饰符，可以在时间修饰符后面添加native解决。

1.因为el-input是el-radios的子元素，所以在点击的时候，会触发el-radios的点击事件，所以就想到了事件修饰符，但是使用的时候就遇到了问题，发现没有效果。查了资料才知道，需要加native.stop可以实现。

2.没有方法的元素也可以添加click事件，可以不用写方法。

        

<el-radio v-for="item in dataList" :key="item.id" v-model="input" :label="item.val" :disabled="iscz == '1' ? false : true" @change="change" @click.native。stop="clickradios(item.val,$event)" :class="item.issr == 1 ? 'hasinput' : ''" :style="'width:' + width">
    {{ item.name }}
    <el-input v-if="item.issr == '1'" type="textarea" height="40px" autosize                     style="margin-left: 10px" placeholder="请输入内容" :disabled="iscz == '1' ? false : true" v-model="model" :class="model == '' ? 'cred' : ''" @change="inputChange" @click.native.stop >
    </el-input> 
</el-radio>

methods: {
     clickradios (val, e) {
      // 因为原生click事件会执行两次，第一次在label标签上，第二次在input标签上，故此处理
      // console.log(e.target.tagName);
	  if (e.target.tagName === 'INPUT') return;
      if (this.input == val) {
        // 写一个异步的操作，等change事件完成会后在进入里面的代码
        setTimeout(() => {
          // 点击了一样的按钮
          //返回参数
          this.parentList = '-1'
          this.return()
        }, 500)
      }

    },
     change: function (data) {
      //单选按钮改变
      this.parentList = this.setObj(data);

      //讲参数名，以及数据传递给父组件
      this.return();
    },
}

ps：重点就是click事件不会触发，且会在触发了click事件之后再调用change事件，需要做的就是利用事件循环机制将操作在异步容器里面执行，就是常用的定时器。就可以实现操作了！耶，又解决一个问题！希望能帮到大家。