vue el-table单选功能

<template>
<div class="commonTable">
    <el-table :data="expertList" class="tabBack" stripe>
        <el-table-column type="index" label="" width="50">
            <template slot-scope="scope">
                <el-radio 
                    :label="scope.row.id"
                    v-model="radio"
                    @change.native="getCurrentRow(scope.row)"
                 > </el-radio>
            </template>
        </el-table-column>
        <el-table-column prop="expertGroupName" label="组名"></el-table-column>
        <el-table-column prop="leaderName" label="专家组长"></el-table-column>
        <el-table-column prop="expertGroupMemberName" label="评审组成员"></el-table-column>
        <el-table-column label="标签" min-width="100">
            <template slot-scope="data">
                <span class="tag" v-for="(item,index) in data.row.tagVoList" :key="index">
                    {{item.tagName}}
                </span>
            </template>
        </el-table-column>
        <el-table-column prop="TaskCount" label="累计任务数量" width="100">
            <template slot-scope="data">
                <div class="txtRig">{{data.row.type}}</div>
            </template>
        </el-table-column>
    </el-table>
    <div class="page" v-if='allCount > pageSize'>
        <el-pagination background layout="prev, pager, next, jumper" :page-size='pageSize' :total='allCount' :current-page="pageIndex" @current-change='handleCurrentChange'>
        </el-pagination>
    </div>
</div>
</template>
<script>
export default {
  data() {
    return {	
      expertList: [
        {id: '1001',name: "小李",sheetType: "调休单",count:1},
        {id: '1002',name: "小李",sheetType: "病假单",count:5},
        {id: '1003',name: "小李",sheetType: "事假单",count:3},
        {id: '1004',name: "小朱",sheetType: "病假单",count:9},
        {id: '1005',name: "小朱",sheetType: "问题单",count:7},
        {id: '1006',name: "小白",sheetType: "调休单",count:3},
      ], // 批量替换专家组数据
      pageIndex: 1,
      pageSize: 5,
      allCount: 0,
      radioItem: {}, // 单选数据
      radio: "", //单选项id
    };
  },
  created(){
      init();
  },
  methods: {
    init(){ // 初始时选中项置空
        this.radioItem = [];
        this.radio = "";
    },
    // 批量替换专家组 获取选中行数据
    getCurrentRow(item){
        this.radioItem = item;
    },
};
</script>

单选按钮后不显示内容

• 这里写 的目的是为了页面不显示内容，只显示单选操作。

<el-radio 
    :label="scope.row.id"
    v-model="radio"
    @change.native="getCurrentRow(scope.row)"
> </el-radio>

• 标签里不写&nbsp可以设置css样式

<style>
.el-table td .cell .el-radio .el-radio__label {
    display:none;
}
</style>

bug：选中首页第一个；翻页后第一个还是选中的

<el-radio 
    :label="scope.row.id"
    v-model="radio"
    @change.native="getCurrentRow(scope.row)"
> </el-radio>

• :label="scope.$index" scope.$index每页都是从0开始，不能用；要用唯一性id。