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

比眉伴天荒 2022-08-31 02:17 84阅读 0赞

**前言：**

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

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

**解决办法：**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70][]

话不多说，上代码：

<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;
                }

最后来个成品效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1][]

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

[https_element.eleme.cn_zh-CN_component_table]: https://element.eleme.cn/#/zh-CN/component/table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70]: /images/20220829/ff92d629c60344a1b1445eba4e98f39a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1]: /images/20220829/d5182da000d94b4f93afa544e88c022c.png