vue+element ui 表格一整行选择（绑定单选按钮）

先上成品图

element ui表格在做单行选择时，可以直接使用table自带的属性 highlight-current-row （当前行高亮）和 row-click（点击某一行） 方法来选取一行并高亮显示，但是视觉效果并不是很好，所以决定再给表格每一行绑定一个单选框，将单选框的选择状态和表格的单选状态高亮显示进行绑定。

相关HTML如下所示，以一个简单表格为例

<template>
    <div class="listSelection-tbl">
        <el-table 
        :data="tableData"
        highlight-current-row
        :row-class-name="tableRowClassName"
        @row-click="onRowClick">
            <el-table-column width="60" align="center" label="选择">
                <template slot-scope="scope">
                    <el-radio 
                    :label="scope.$index"
                    v-model="radio"></el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="模板名称"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </div>
</template>

相关data如下所示

data() {
    return {
        // 单选框组件绑定的值，通过改变radio可以改变当前选中的单选框
        radio: '',
        ...
    }
}

相关methods

我们需要将表格某一行的index值和上边 data 中定义好的 radio 进行绑定来达到同步修改单选框的目的，但是直接通过 @row-click 点击事件是无法获取表格某一行的index值的，查阅文档后发现表格有一个属性 row-class-name ，它可以绑定一个行的 className 的回调方法，只需要放入到methods中，el-table 会自动触发，我们可以使用这个方法给每一行数据添加一个属性index，然后再将 row.index 绑定给 radio ，即可实现单选框的同步切换。

methods: {
    tableRowClassName({row, rowIndex}) {
        row.index = rowIndex
    }
    onRowClick(row) {
        this.radio = row.index
    },
}