element-ui 带单选框的表格

效果：不只是带单选框，点击当前行单选框选中状态

网上查了一些发现很多都是只能点击当前radio选中当前行，配合element-ui的单选table时发现两个的选择状态是不一致的，所以调整了一下

效果

代码

<el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                @row-click = "showRow"
                style="width: 100%"
                border>
                <el-table-column label="选择" width="70" center>
                    <template scope="scope">

                    <el-radio class="radio" v-model="radio"  :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.$index)" >&nbsp;</el-radio>
                </template>
            </el-table-column>

//row-click 当某一行被点击时会触发该事件 row, event, column

showRow(row){
//赋值给radio
            this.radio = this.tableData.indexOf(row);
        },

/* urrent-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow */

handleCurrentChange(val,index) {
            this.currentRow = val;
            this.$emit('data',val.pkg);
        },

getCurrentRow(val){
    console.log(val)
},