vue 的select标签遍历传key显示value

最新推荐文章于 2024-02-04 13:55:46 发布

柏燊

最新推荐文章于 2024-02-04 13:55:46 发布

阅读量1.5k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44805962/article/details/118960894

版权

本文介绍了在Vue.js应用中如何使用A-UI的Select组件进行双向绑定，其中数据的显示值与保存值不同。通过`v-for`指令遍历类型列表，使用`:key`和`:value`属性来分别设置选项的唯一标识和显示内容。在`onChange`事件中，根据选择的值更新保存的数据。同时，`filterOption`方法用于实现搜索过滤功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

显示是列表的value，保存时是保存key
双向绑定也是key(id),在select标签下显示value，定义遍历的list，index，key,value

  <a-form-item
        label="type"
        :labelCol="{span: 7, offset: 0}"
        :wrapperCol="{span: 13, offset: 0}"
      >
        <a-select
          :allowClear="true"
          showSearch
          placeholder="请选择"
          :filterOption="filterOption"
          @change="onChange"
          v-decorator="['typeId', {rules: [{ required: true, message: '不能为空'}]}]"
        >
          <a-select-option
            v-for="(item,index) in typeList"
            :key="index"
            :value="item.typeId"
          >{{item.name}}</a-select-option>
        </a-select>
      </a-form-item>

转换大小写

  filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },

   getTypeList() {
      var that = this;
      var params = {};
      that.$get("url", params).then(r => {
        var data = r.data;
        that.typeList = data;
      });
    },

选择不同的value更换key，onchange控制

 onChange(value, label, extra) {
      this.paramsData.typeId = label[0];
    },