vue+element 实现checkbox单选

vue+element 实现checkbox单选

1、标签

<el-table @selection-change="handleSelectionChangeScript" ref="scriptDetailData" :data="scriptDetailData" lazy
        v-loading="scriptLoading" @select-all="dialogCheck" @select="dialogCheck"> 
         <el-table-column type="index" width="50" :index="indexMethodScript" label="编号" />
        <el-table-column prop="scriptName" label="脚本名称" width="310" />
</el-table>
<div slot="footer" class="dialog-footer">
        <el-button @click="scriptVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitFormScript">确 定</el-button>
</div> 

2、方法

methods: {
 //脚本选中数据
      handleSelectionChangeScript(selection) {
      //多选改单选
      if (selection.length === 0) {
          this.selectioned = null
        }
       },
      //单选操作，全选按钮失效操作
       dialogCheck: function(selection, row) {
        this.$refs.scriptDetailData.clearSelection()
        if (selection.length === 0) { // 判断selection是否有值存在
           return
         }
         if (row) {
           this.selectioned = row
           this.scriptIds = row.scriptId;
           this.scriptNames = row.scriptName;
           this.$refs.scriptDetailData.toggleRowSelection(row, true)
         }
       },
      //确认选中的脚本
       submitFormScript(row) {
         this.scriptVisible = false;
         this.form.scriptName = this.scriptNames.toString();
         this.form.scriptId = this.scriptIds.toString();
       },
}

3、建议使用双击选中，哈哈哈！