element ui 选择多条信息如何同时获得code和name值

Question

<el-form-item label="对应部门：" >
          <el-select v-model="dataForm.supvList" multiple="true" value-map="item" clearable
                     placeholder="对应部门">
            <el-option
              v-for="item in deptList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
          </el-form-item>

使用el-select的multiple选择多条的时候如何同时获取到code和name，现在我上边写的只能获取到code值，请教如何写可以获取？

Answer 1

可以通过code去deptList 匹配

Answer 2

可以在watch中监听dataForm.supvList实时获取，使用的时候直接取list。也可以在methods中定义一个方法，在需要的时候手动调用，这样性能更好。

<script>
export default {
    data() {
        reutrn {
            list: []
        }
    },
    watch：{
        'dataForm.supvList'(val) {
           this.list = this.deptList.filter(item => val.includes(item.code))
        }
    }，
    methods:{
        getList() {
            this.list = this.deptList.filter(item => val.includes(item.code))
        }
    }
}
</script>