vue 如何实现checkbox单选功能,不用radio的情形下

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36146776/article/details/86575112

效果图

 

<el-table :data="gridData" :show-header="showHeader">
      <el-table-column width="200">
        <template slot-scope="scope">
          <el-checkbox-group v-model="scope.row.radioValue">
            <el-checkbox  false-label='null' :true-label="item.id" v-for="item in scope.row.radioList">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column width="100" label="Action">
        <template slot-scope="scope">
          <el-button type="text" icon="ev-icon el-icon-arrow-up" title="up" class="ev-button-default-icon" slot="reference" @click="upOrder(scope.row,scope.$index)"></el-button>
          <el-button type="text" icon="ev-icon el-icon-arrow-down" title="down" class="ev-button-default-icon" slot="reference" @click="downOrder(scope.row,scope.$index)"></el-button>
        </template>
      </el-table-column>
    </el-table>

data() {
      return {
        showHeader:false,
        gridData: [
          {name:'LastModified',index:0,radioList:[{id:'ASC',name:'LastModified ASC'},{id:'DESC',name:'LastModified DESC'}]},
          {name:'LastActive',index:1,radioList:[{id:'ASC',name:'LastActive ASC'},{id:'DESC',name:'LastActive DESC'}]},
          {name:'Created',index:2,radioList:[{id:'ASC',name:'Created ASC'},{id:'DESC',name:'Created DESC'}]},
          {name:'Name',index:3,radioList:[{id:'ASC',name:'Name ASC'},{id:'DESC',name:'Name DESC'}]},
          {name:'Price',index:4,radioList:[{id:'ASC',name:'Price ASC'},{id:'DESC',name:'Price DESC'}]},
          {name:'Landlord',index:5,radioList:[{id:'ASC',name:'Landlord ASC'},{id:'DESC',name:'Landlord DESC'}]},
          {name:'Agent',index:6,radioList:[{id:'ASC',name:'Agent ASC'},{id:'DESC',name:'Agent DESC'}]},
          {name:'Status',index:7,radioList:[{id:'ASC',name:'Status ASC'},{id:'DESC',name:'Status DESC'}]},
        ],
      };
    },

核心代码：

<el-checkbox-group v-model="scope.row.radioValue">
            <el-checkbox  false-label='null' :true-label="item.id" v-for="item in scope.row.radioList">{{item.name}}</el-checkbox>
          </el-checkbox-group>