ant design vue中下拉框隐藏已选择的项，怎么显示name而不是id

Question

问题描述

vue引用了ant-design中下拉框隐藏以选择项，但是出现的是name对应的id值，希望出现name值

相关代码

部门和事件是关联的
<template>
<a-form-item

      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label="部门">
      <a-select  v-decorator="[ 'officeCode', {} ]" placeholder="请选择部门"   @change="handleDeptChange">
        <a-select-option v-for="(item, key) in implEntityOptions" :key="key" :value="item.implEntityCode">
         <span style="display: inline-block;width: 100%" :title=" item.implEntityName">
           {{ item.implEntityName}}
        </span>
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      label="所属事件">
      <a-select mode="multiple"   v-decorator="['itemIds', {}]"  placeholder="请选择事件"  @change="handleItemInput" >
        <a-select-option v-for="(item, key) in filteredOptions" :key="key" :value="item.implId" >
         <span style="display: inline-block;width: 100%" :title=" item.implName">
          {{item.implName}}
        </span>
        </a-select-option>
      </a-select>
    </a-form-item>
  </a-form>

</template>

---

<script>
import JLectureSelectTag from '@/views/train/lecture/JLectureSelectTag'
import { httpAction,getAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"

export default {

name: "MaterialModal",
components: {
  JLectureSelectTag,
},
data () {
  return {
    title:"操作",
    visible: false,
    model: {},
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
    implEntityOptions: [],
    implInfoData:[],
    implInfoOptions:[],
    selectedItems: [],
    confirmLoading: false,
    form: this.$form.createForm(this),
    validatorRules:{
      materialName:{rules: [{ required: true, message: '请输入教材名称!' }]},
      materialHour:{rules: [{ required: true, message: '请输入学时!' }]}
    }
  }
},
computed: {
  **filteredOptions() {
    return this.implInfoOptions.filter(o => !this.selectedItems.includes(o.implId));**
  },
},

methods: {
  initDictData() {
            getAction(`/impl/owBizDeptImplement/queryList`).then((res)=>{
      if(res.success){
        console.log("dictOptions{}",res.result);
        this.implInfoOptions=res.result["implInfos"];
        console.log("impl{}",res.result["implInfos"]);
        this.implEntityOptions = res.result["impl"];
        this.implInfoData =res.result["implMap"];
      }
    });
  },
  handleDeptChange(value){
    console.log("bbb:",value);
    console.log("aaa:",this.implInfoData[value]);
    this.implInfoOptions = this.implInfoData[value];
    console.log("implns:",this.implInfoOptions);
  },
  handleItemInput(e) {
    let val=e;
      console.log("val:",val);
      this.selectedItems=val
      console.log(this.selectedItems);

  },

}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

希望下拉框显示的是name，不是对应的id

Answer 1

加上 labelinvalue 属性，然后再根据value过滤即可

Answer 2

请问解决了么