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)" > el-radio>
                    template>
                el-table-column>
el-table>

//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)
        },