element表格实现单选框

利用checkbox来实现表格单选,思路就是将checkbox的值绑定到当前行mainFlag,定义checkbox的change事件,每当值改变时将上次选中的行数据mainFlag改给false

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column label="单选项" width="50">
            <template slot-scope="scope" >
              <el-checkbox 
              @change="handleChangeMain( scope.row,scope.$index)" 
              v-model="scope.row.mainFlag" >
              el-checkbox>
            template>
          el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      el-table-column>
    el-table>
  template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

data中定义mainPetionIndex用来记录上一次选择的下标

 handleChangeMain(row,index){
      if(row.mainFlag){
        if(this.mainPetionIndex != -1){
          console.log('mainPetionIndex', this.mainPetionIndex)
          this.tableData[this.mainPetionIndex].mainFlag = false
        }
        this.mainPetionIndex = index;
      }else{
        this.mainPetionIndex=-1;
      }
    },
1
2
3
4
5
6
7
8
9
10
11