【vue】el-table 优化单选效果，加入el-radio

前言：

        开发中经常遇到需要列表单选的情况，先前我用的是CheckBox，通过el-table自带的 selection-change 方法中的逻辑处理来实现单选效果，但这有个缺点就是 当点击全选按钮时，方法中设定的逻辑就不好用了，导致页面只选中一条，而取值却取到了所有。

         今天有点时间，对这个做个改造，顺手记录下。

解决办法：

       由element api中的table组件api(https://element.eleme.cn/#/zh-CN/component/table)可知，el-table是自带单选效果的，只是它的单选是单行选中高亮（如下图所示），这并不是我所想要的，我想要的是能和多选CheckBox 一样，最前面有个 radio 标识去展示选中效果。

       话不多说，上代码：

        <el-table
            ref="表格名称"
            :url="请求路径"
            :query="query"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
            <template slot="table">
                <el-table-column label width="45">
                    <template slot-scope="scope">
                        <el-radio :label="scope.row.id" v-model="id"><span></span></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="name" :label="languageList.name"></el-table-column>
                <el-table-column prop="sortId" :label="languageList.sortId"></el-table-column>
            </template>
        </el-table>

根据el-table  api 中的单选效果，在表格配置中增加选中行高亮配置 highlight-current-row ，因为我们在最前面一列中，增加了一列 单选 el-radio 控件，需要和当前高亮选中做数据联动，通过查阅 api 可知搭配 current-change 方法，获取到当前选中的行，我们只需要在 handleCurrentChange方法中将 单选控制的值 等于 当前选中行id 即可。

            handleCurrentChange(currentRow, oldCurrentRow) {
                this.id=currentRow.id;
            }

最后来个成品效果图：

这样避免了全选的问题，以及为了全选而增加的css样式设置等问题。如有更好的方法，欢迎留言