最近公司在做一个服务平台的项目,使用的若依框架,在一个单页面的vue文件中使用
有使用到搜索候选词,选中并且可能要发送给接口进行查询列表
以下代码仅供参考,是否在项目中有较高的实用度,无法确认,目前还没有接口进行测试
也不知道这样子加数组会怎么样,之后如果有修改再说。
单页面的html:
我是准备用form提交给后台查询
<el-form label-width="110px">
<el-form-item v-for="(items, index) in alert_words" :key="index">
<span slot="label">{{ items.alert_tit }}:</span>
<el-radio-group v-model="queryWord[index]">
<el-radio
v-for="(alert, index2) in items.alert_arr"
:key="index2"
:label="alert"
@change="handleRadioChanges(alert, index2)"
/>
</el-radio-group>
</el-form-item>
</el-form>
alert_words: [
{
alert_class: 'level',
alert_tit: '级别',
alert_arr: ['全部', '国家级', '省级', '地级市', '县级']
},
{
alert_class: 'main',
alert_tit: '主导产业',
alert_arr: ['全部', '电子信息', '新材料', '新能源与节能环保', '现代服务业', '先进设备制造']
},
{
alert_class: 'build',
alert_tit: '建筑状态',
alert_arr: ['全部', '已建', '在建', '拟建']
},
{
alert_class: 'area',
alert_tit: '占地面积',
alert_arr: ['全部', '2000m²以下', '2000m²~3000m²', '3000m²~4000m²', '4000m²~5000m²', '5000m²以上']
},
{
alert_class: 'plot',
alert_tit: '容积率',
alert_arr: ['全部', '1.5%以下', '1.5%~2%', '2%~2.5%', '2.5%~3%', '3%以上']
},
{
alert_class: 'green',
alert_tit: '绿化率',
alert_arr: ['全部', '10%以下', '10%~15%', '15%~20%', '20%~30%', '30%以上']
}
]
css
.alter_words {
color: #797979;
font-size: 12px;
& > div {
margin: 0 0 10px 0;
}
i {
display: inline-block;
width: 70px;
text-align: left;
font-style: normal;
}
span {
display: inline-block;
padding: 5px 15px;
margin: 0 10px;
&.active {
color: #073fb5;
border: 1px solid;
border-radius: 5px;
font-size: 14px;
}
&:hover {
cursor: pointer;
}
}
.el-form-item {
margin: 0;
}
::v-deep .el-radio {
padding: 10px;
.el-radio__input {
opacity: 0;
outline: none;
position: absolute;
z-index: -1;
}
&.is-checked {
border: 1px solid #2b84de;
border-radius: 5px;
}
.el-radio__label {
padding-left: 0;
font-size: 12px;
}
}
}