element表格实现复选框单选

 

默认表格前面的复选框是可以选择多个,但有的需求是只能选择一个,

可以通过clearSelection和toggleRowSelection去实现,把当前选中的这条selected设置成true。

     <div class="same-table">
           <el-table
               :data="tableData"
               class="oneTabel"
               ref="multipleTable"
               border
               fit
               @selection-change="handleSelectionChange"
               @select-all="dialogCheck"
               @select="dialogCheck"
               style="width:100%;">
                   <el-table-column type="selection" width="50"></el-table-column>
                   <el-table-column type="index" width="60" label="序号"></el-table-column>
                   <el-table-column prop="name" label="机构"></el-table-column>
                   <el-table-column prop="negativeDec" label="负面清单描述"></el-table-column>
           </el-table>
       </div>

  

methods: {
       handleSelectionChange(val) {
            console.log(val, 'val')
            this.multipleSelection = val;
        },
        dialogCheck: function(selection, row) {
            console.log(selection, row);
            this.$refs.multipleTable.clearSelection()
            if (selection.length === 0) { 
                return
            }
            if (row) {
                this.selectioned = row
                this.$refs.multipleTable.toggleRowSelection(row, true)
            }
        }
}

  

posted @ 2021-01-30 20:31  紫诺花开  阅读(906)  评论(0编辑  收藏  举报