关于#vue#的问题，如何解决？(关键词-下拉列表)

问题遇到的现象和发生背景

表格里的普通数据都是直接渲染的没问题，但其中有一组数据是从外键引入过来的，并且需要用下拉菜单体现，但是下拉选项是原始数据id值体现出来的，所以界面上显示的内容不是我想要的。

问题相关代码，请勿粘贴截图

        <template #edit="{ row }">
          <vxe-input
            v-if="!item.FKey"
            :key="index"
            :placeholder="item.C_Help_Text"
            :type="item.C_Type"
            v-model="row[item.C_Name]"
          ></vxe-input>
          <vxe-select
            v-else
            v-model="row[item.label]"
            clearable
            transfer
            @change="roleChangeEvent"
          >
            <vxe-option
              v-for="item in roleList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
              :disabled="item.disabled"
            ></vxe-option>
          </vxe-select>
        </template>

运行结果及报错内容

渲染的数据是这样的：

下拉列表的数据是正常的：

我的解答思路和尝试过的方法

       <template #default="{ row }" v-if="item.FKey">
            <span>{{ formatCompany(row[item.company]) }}</span>
       </template>

//对应的函数
      formatCompany(value) {
          const item = this.roleList.find((item) => item.value === value);
          console.log(value,item);
          return item ? item.label : value;     
        },

加了默认显示，选择完选项后可以正常显示了

但是在刚进入界面时不显示数据

我觉得有可能是绑定的数据有问题？或者是生命周期的问题，这是个触发函数，在首次进入页面时没有执行？

希望得到指点

我想要达到的结果

一进页面就能正常显示

你选择完把数据存起来了吗？没存的话页面刷新后会被重置