elementUI表格单选，点击行选中一行数据

本文章仅是记录我在项目中遇到的各种单选问题，希望对你会有所帮助，写的不对的地方欢迎在评论区讨论。

1.elementUI 实现表格单选

只需要在表格的 < el-table-column > 中添加一个自定义模板即可：

<el-table-column width='60px'>
    <template slot-scope="scope">
        <el-radio v-model="radioSelected" :label="scope.row.name" @change.native="handleSelectionChange(scope.row)">&nbsp;</el-radio>
    </template>
 </el-table-column>

完整template部分：

      <el-table
        ref="todoListRef"
        :data="currentTableData"
        size="small"
        style="width: 100%"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column
          width="50px"
          align="center">
          <template slot-scope="scope">
            <el-radio v-model="radioSelected" :label="scope.row.name" @change.native="handleSelectionChange(scope.row)">&nbsp;  </el-radio>
          </template>
        </el-table-column>
</el-table>

javascript部分：

data(){
	return{
	  // 单选绑定
      radioSelected: null,
      // 表格选中row数据
      multipleSelection: {},
	}
},
methods:{
    // 点击行选中,绑定数据
    handleSelectionChange(val) {
      this.radioSelected = val.name  //选中行的name
      this.multipleSelection = val  //选中的一行数据
    }
}

到这就大功告成了，以下是单选的其他需求，到此止步！！！

2.后台没传id，自己根据表格数组创建id,绑定到列的:index

template部分：

      <el-table
        ref="todoListRef"
        :data="currentTableData"
        size="small"
        style="width: 100%"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column
          width="50px"
          align="center">
          <template slot-scope="scope">
            <el-radio ref="radios" v-model="radioSelected" :label="scope.row.name" @change.native="handleSelectionChange(scope.row)">&nbsp;  </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          :index="getIndex"
          align="center"
          label="序号"
          type="index"
          width="50"
        />
</el-table>

javascript部分：

methods:{
    // 表格序号
    getIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    },
}

3 .单选按钮和索引在同一列,将 &nbsp；替换（含表格分页）

由于没有id所以只能自己使用方法 getInde（） 去处理id ，有id 可以直接绑定 row.id。

template部分：

<el-table
        ref="todoListRef"
        :data="currentTableData"
        border
        height="320"
        size="small"
        style="width: 100%"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
    <el-table-column width='70px'>
        <template slot-scope="scope">
            <el-radio v-model="radioSelected" :label="scope.row.name" @change.native="handleSelectionChange(scope.row)">{{getIndex(scope.$index)}}</el-radio>
        </template>
    </el-table-column>
</el-table>