工作太忙，好久没打点，来点原创浇浇水，要不博客真的长草了。。。

 

element-ui组件强大，但是使用时发现少了一个最常见的组件：单选列表。

我的概念中的列表框是这样的（从桌面开发带来的习惯-_-）

或者是穿梭框的左半边

但是这么基础的东西，element-ui 竟（懒）然（得）没（做）有（啊）！

初学的同学可能想到拿table来弄了，但是table这个重量级。。加上一堆点击的绑定。。。

 

其实。。。。要实现这玩意，一行程序代码也不用写

因为，添加一个样式就搞定

全局定义一个覆盖样式：

/* ---------------- el-radio-group下的el-radio-button切换为列表的形式 ---------------- */
.el-group-list.el-radio-group{
  display: flex;
  flex-direction: column;
  align-items:stretch;}

.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
.el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
.el-group-list.el-radio-group .el-radio-button__inner
{
  border-radius: 0px !important;
  border: none !important;
}

.el-group-list.el-radio-group .el-radio-button{
  border-bottom: 1px solid #F7F7F7 !important;
}

.el-group-list.el-radio-group{
  border: 1px solid #dcdfe6;
}

.el-group-list.el-radio-group > label > span{
  width: 100%;
  text-align: left;
  padding-left: 20px;
}

用法如下：

按照radio的方式来添加一个radio group:

<el-radio-group v-model="selectedUserId" class="x-fillitem el-group-list" @change="reloadOrder">
    <el-radio-button :label="-1">&lt;全部&gt;</el-radio-button>
    <el-radio-button v-for="(item,index) in userLabelList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
</el-radio-group>
注意红字，el-group-list为覆盖样式。原本应该长这样：

添加样式后，就变成这样了：

直接绑定一个选择变量，相当好使

 

要问为什么，样式摆在那，看不懂的同学要恶补一下CSS了。。?