elementui中如何优雅美观的实现单选表格
element ui 中如何实现单选表格
我们都知道 element ui 中有复选框的表格 ，但是如果我们有单选的表格怎么办，样式还要和风格搭配 ，接下来我 ⼀⾏代码带你实现 单选功能。
1. 我先讲下我们的思路：⾸先我们要知道我们的功能是单选，所以需要element 的单选控件el-radio
2. 然后我们需要知道我们当前点击的是哪⼀⾏ ，所以正好⽤到element 表格的⼀个事件
@row-click=“getTableData” 这个就能知道我们⽬前点击当前⾏的值，
3. 我们根据这个值来判断⽤户点击的是那些数据 ，但是我们还要给当前的redio 赋值让其变成选中状态 我们就⽤到了<template slot-
scope="scope">这个语法 见下⽅代码，拿到这个就可以给当前的radio赋值了
4. 但是有个问题 他会显⽰你这个选中的状态 包括后⾯的⽂字 所以我就写了 样式来覆盖，千万不要忘记添加下⽅的style这个样式
/
/⾸先在data中定义⼀个radio
radio: "", //单选的值
<el-table
element表格横向滚动条:data="locationData"
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="w.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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。