element table 单选按钮_element-ui Table表格结合CheckBox实现单选效果

最近做项目遇到一个需求,需要实现一个表格的单选,由于项目使用的是element-ui.于是去看了表格的文档,确实有单选的方法,但是官方的单选是直接选中表格行,通过颜色来区分

看着效果不明显,实际需要一个复选框可以选择,效果图如下

image.png

于是自己结合element的多选框方法,做了一个简易的单选功能,代码如下

html代码

shopInfo

ref="multipleTable"

:data="tableData3"

tooltip-effect="dark"

highlight-current-row // element-UI提供的单选方法,可以使当前选中行高亮

style="width: 100%"

@current-change="handleSelectionChange"> // 单选方法,返回选中的表格行

label="操作"

width="55">

// 添加一个多选框,控制选中与否

// 单选的也可以用单选框,这样效果更明显,选择之后不能取消

label="日期"

width="120">

{ { scope.row.date }}

prop=