当前位置: 首页 > 工具软件 > radio4000 > 使用案例 >

vue动态渲染el-radio,获取对应group选中的备选词

丁钟展
2023-12-01

最近公司在做一个服务平台的项目,使用的若依框架,在一个单页面的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;
      }
    }
  }

 类似资料: