新增子组件功能中有个el-select的选择框，在父组件表格字段上展示的是value值而不是label值，但是我需要他默认初始化的时候展示的是label值

Question

新增子组件功能中有个el-select的选择框，然后新增完成后，在父组件表格字段上存储的是value值，随即表格上显示的也是value值，能不能让它在表格上显示对应的label值，而不是value值呢？这个怎么操作？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

要解决这个问题，你需要在子组件中获取到el-select组件选中的label值，并将其传递给父组件。然后，在父组件中更新表格数据，以展示这个label值而不是value值。

根据你提供的代码片段，以下是一些可能的步骤来实现这个需求：

1. 子组件中获取选中的label值： 在子组件的el-select组件中，你可以监听change事件来获取选中项的label值。

2. 将选中的label值传递给父组件： 当el-select组件的值发生变化时，你可以使用this.$emit来向父组件发送一个自定义事件，并传递选中的label值。

3. 父组件接收并更新表格数据： 在父组件中，监听子组件发出的自定义事件，并更新表格的数据。

下面是具体的代码实现示例：

子组件 (假设子组件名为 ChildComponent.vue):

<template>
  <el-select v-model="selectedValue" @change="handleSelectChange">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        // 你的选项数据
      ]
    };
  },
  methods: {
    handleSelectChange(newValue) {
      // 假设options中每个item都有value和label
      const selectedItem = this.options.find(item => item.value === newValue);
      this.$emit('update:selectedLabel', selectedItem ? selectedItem.label : null);
    }
  }
};
</script>

父组件:

<template>
  <ChildComponent :options="options" @update:selectedLabel="updateLabelInTable" />
  <!-- 表格 -->
  <vxe-table :data="managementData" style="width: 100%; margin-top: 10px" border align="center">
    <vxe-column field="name" title="姓名" width="220" />
    <vxe-column field="sourcecityLabel" title="配置"> <!-- 注意这里的字段名 -->
    </vxe-column>
  </vxe-table>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      managementData: [
        // 你的表格数据
      ],
      options: [
        // 你的选项数据
      ]
    };
  },
  methods: {
    updateLabelInTable(selectedLabel) {
      // 假设managementData是当前表格的数据数组
      // 更新表格数据，展示选中的label
      this.managementData.forEach(item => {
        if (item.sourcecityCode === this.selectedValue) { // 假设selectedValue是当前选中的value
          item.sourcecityLabel = selectedLabel; // 更新为label值
        }
      });
    }
  }
};
</script>

请注意，你需要根据你的实际项目结构和数据模型调整上述代码。

至于参考资料，你可以查看Element UI的官方文档，特别是关于el-select组件的部分，以及Vue.js的事件系统文档，了解如何使用this.$emit来派发自定义事件。以下是Element UI的官方文档链接：

• Element UI 官方文档: https://element.eleme.io/#/en-US/component/select

希望这些信息能帮助你解决问题！如果还有其他问题，欢迎继续提问。