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>
        <af-table-column label="批次號" prop="batchNo" align="center"></af-table-column>
        <af-table-column prop="manageComName" label="管理機構" align="center"></af-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
    }
   }

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章