element ui 中如何实现单选表格
我们都知道 element ui 中有复选框的表格 ,但是如果我们有单选的表格怎么办,样式还要和风格搭配 ,接下来我 一行代码带你实现 单选功能。
- 我先讲下我们的思路:首先我们要知道我们的功能是单选,所以需要element 的单选控件el-radio
- 然后我们需要知道我们当前点击的是哪一行 ,所以正好用到element 表格的一个事件
@row-click=“getTableData” 这个就能知道我们目前点击当前行的值, - 我们根据这个值来判断用户点击的是那些数据 ,但是我们还要给当前的redio 赋值让其变成选中状态 我们就用到了
<template slot-scope="scope">
这个语法 见下方代码,拿到这个就可以给当前的radio赋值了 - 但是有个问题 他会显示你这个选中的状态 包括后面的文字 所以我就写了 样式来覆盖,千万不要忘记添加下方的style这个样式
//首先在data中定义一个radio
radio: "", //单选的值
<el-table
:data="locationData"
style="width: 100%"
height="400px"
border
show-overflow-tooltip="false"
@row-click="getTableData"
>
<el-table-column width="50">
<template slot-scope="scope">
<el-radio v-model="radio" :label="scope.row.id"></el-radio>
</template>
</el-table-column>
<el-table-column prop="name" label="节点名称"></el-table-column>
<el-table-column prop="category" label="类别"></el-table-column>
<el-table-column prop="contact" label="描述"></el-table-column>
<el-table-column prop="address" label="位置"></el-table-column>
</el-table>
//在methods 中写这个方法
getTableData(event) {
/**
* 方法 获取单行的数据
* event 返回的参数
*/
console.log(event);
this.radio = event.id;
this.selectLocationData = event;
},
//写在css里面
>>> .el-radio {
margin-left: 6px;
}
>>> .el-radio .el-radio__label {
display: none;
}