element-ui Checkbox 實現單選

html 部分

<el-table id="tables" ref="multipleTable" row-key="id" :data="tableData" max-height="450" border style="width: 100%" @selection-change="handleSelectionChange" //將用到此 :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}"
   >
     <el-table-column type="selection" width="60" align="center" :reserve-selection="true"></el-table-column>
     <el-table-column prop="id" label="序號" width="120" align="center"> </el-table-column>
     <el-table-column prop="name" label="話題名稱" align="center" show-overflow-tooltip> </el-table-column>
 </el-table>

js部分

handleSelectionChange(val) { if(val.length >=2){ // 刪除索引為0的 // console.log(val.splice(0,val.length-1),'被刪除的')
     let arrays = val.splice(0,val.length-1) arrays.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); //除了當前點擊的，其他的全部取消選中
 }) } // console.log(val,'最后得到的')this.array = val }

 

 

<el-table id="tables" ref="multipleTable" row-key="id" :data="tableData" max-height="450" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{background:'#F8F8FA',color:'#606266',fontSize:'13px',fontWeight:'bold'}">

            <el-table-column type="selection" width="60" align="center" :reserve-selection="true"></el-table-column>

            <el-table-column prop="id" label="序號" width="120" align="center"> </el-table-column>

            <el-table-column prop="name" label="話題名稱" align="center" show-overflow-tooltip> </el-table-column>

            <el-table-column prop="introduction" label="話題內容" show-overflow-tooltip align="center"></el-table-column>

            <el-table-column prop="creatorName" label="創建人" align="center" show-overflow-tooltip> </el-table-column>

          </el-table>