el-table表格的一些操作-表格实现单选、多选

表格实现单选

@select="select"

@row-click="rowClick"

@selection-change="selectionChange"

<el-table ref="multipleTable" 
      @select="select" 
      @row-click="rowClick"
      :data="userList" 
      tooltip-effect="dark" 
      style="width: 100%"
      @selection-change="selectionChange">
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column label="序号" type="index" align="center"></el-table-column>
   <el-table-column label="用户账号" align="center">
       <template slot-scope="scope">{{ scope.row.userName }}</template>
   </el-table-column>
</el-table>

select(selection, row) {
	// 清除 所有勾选项
	this.$refs.multipleTable.clearSelection()
	// 当表格数据都没有被勾选的时候 就返回
	// 主要用于将当前勾选的表格状态清除
	if(selection.length == 0) return 
	this.$refs.multipleTable.toggleRowSelection(row, true);
},
// 表格的选中 可以获得当前选中的数据
selectionChange(val) {
	// 将选中的数据存储起来
    this.selectData = val
},
// 表格某一行的单击事件
rowClick(row, column) {
    const selectData = this.selectData
    this.$refs.multipleTable.clearSelection()
    if( selectData.length == 1 ) {
        selectData.forEach(item => {
        	// 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
            if (item == row) {
                this.$refs.multipleTable.toggleRowSelection(row, false);
            }
            // 不然就让当前的一行勾选
            else {
                this.$refs.multipleTable.toggleRowSelection(row, true);
            }
        })
    } 
    else {
        this.$refs.multipleTable.toggleRowSelection(row, true);
    }
},

参考文档

Vue 中Element的table多选表格实现单选_vue el-checkbox 变单选-优快云博客

最终解决方法：

selectRadio: 0, // 默认选中第一行数据

<el-table ref="multipleTable" 
     @row-click="rowClick"
     :data="userList" 
     tooltip-effect="dark" 
     style="width: 100%">
   <el-table-column width="80" label="选择">
       <template slot-scope="scope">
          <el-radio v-model="selectRadio" :label="scope.$index">{{''}}</el-radio>
       </template>
    // {{''}}划重点 如果不想label绑定的值显示请置空
   </el-table-column>
   <el-table-column label="序号" type="index" align="center"></el-table-column>
</el-table>

// 表格某一行的单击事件
rowClick(row) {
   console.log('row',row);
}

参考文档

elementui 表格单选以及如何将element Radio组件label绑定的值不显示_u-radio label不显示-优快云博客