关于select组件绑定多个值的方法与回填

适用情景

当一个select组件需要向后端传递两个值时： 如下图选择学段时如果value值只绑定name属性则选定后只会向后端传递name属性，但后端要求传递name的同时把对应的code字段也同时传递，那么就需要绑定name与code两个值，但是value属性只有一个，如何绑定两个呢？

解决办法：将两个属性值拼接成一个字符串，在传递时使用split切割为两个属性：

如下图：这个接口返回了学段的code与name信息，我们在获取到数据后用forEach循环将code与name信息用“-”拼接为一个新的属性periods ，这样在periods中就有了code与name的信息

  //获取code字典列表 code值:学段 period；学科 subject；学制 school_length；年级 grade
    const res = await getDictItem(code);
    if(res.data.code === 0) {
      if (code === "period") {
        res.data.data.forEach((item) => {
          item.periods = item.code + "-" + item.displayName; //将学段的name与code拼接
        });
        periodList.value = res.data.data;
      } 
    }
};

在select组件中value值绑定为periods，这样选择后将可以得到拼接的信息： 通过select组件选择后 最后向后端 传值时 将periods字段用split切割为后端需要的periodDictItemCode、periodDictItemName两个属性即可

  periodList:periods? periods.map((item) => {
        return {
          periodDictItemCode: item.split("-")[0],
          periodDictItemName: item.split("-")[1],
        };
      }): undefined,

注意点：

此时的select组件的value格式为name-code ，那么我们在做表单回填时，接收到的数据tableData.periods也应该处理为name-code形式，否侧回填渲染会有错误。这里是后端返回的详情数据，我们要进行拼接为统一格式后再回填：

tableData.value.grades = res.data.data.gradeDictItemCode + "-" + res.data.data.gradeDictItemName;