新增子组件功能中有个el-select的选择框，在父组件表格字段上存储的是value值，随即表格上显示的也是value值，能不能让它在表格上显示对应的label值

Question

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

Answer 1

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

---

根据您提供的两张截图，我将指导您如何实现在Vue.js的父组件中显示el-select选择框选中的label值而不是value值。

第一步：确保子组件el-select能够获取到value和label

在子组件中，您已经使用了el-select和v-model来绑定选择框的值。v-model默认绑定到value属性，但是您可以通过@change事件来获取用户选择的label。

在子组件的el-select中添加@change事件处理器：

<el-select v-model="form.sourcecityCode" placeholder="请选择" @change="handleSelectChange">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

然后在子组件的<script>部分添加handleSelectChange方法：

methods: {
  handleSelectChange(value) {
    this.$emit('update:selectedLabel', this.options.find(option => option.value === value).label);
  }
}

这个方法会在用户选择一个选项时触发，并且通过$emit将选中的label值传递给父组件。

第二步：在父组件中接收label值

在父组件中，您需要监听子组件发出的update:selectedLabel事件，并更新相应的数据。

在父组件的<template>中，给子组件添加一个事件监听器：

<子组件 ref="子组件的引用名" @update:selectedLabel="handleLabelUpdate" />

然后在父组件的<script>部分添加handleLabelUpdate方法：

methods: {
  handleLabelUpdate(label) {
    // 假设您有一个方法来更新表格数据
    this.updateTableDataWithLabel(label);
  },
  updateTableDataWithLabel(label) {
    // 这里根据实际情况来更新表格数据
    // 例如，如果表格数据是通过API获取的，您可能需要调用API并传递label
  }
}

第三步：更新表格的显示逻辑

在父组件的表格中，您需要确保表格列正确地显示label值。这通常在vxe-table的列定义中设置field属性来实现。

根据您提供的截图，看起来您已经有一个vxe-table组件。确保您的列定义中field属性设置正确，以便能够从数据源中获取正确的属性值。

<cvxe-table :data="managementData" style="width: 100%; margin-top: 10px" border align="center">
  <cvxe-column field="name" title="姓名" width="220" />
  <cvxe-column field="sourcecityLabel" title="配置" /> <!-- 假设您的数据源中有一个sourcecityLabel字段 -->
</cve-table>

请注意，您需要确保数据源managementData中的每个对象都有一个sourcecityLabel属性，这个属性应该包含从子组件传递过来的label值。

参考资料

1. Vue.js官方文档 - 自定义事件
2. Element UI - Select 组件
3. VXETable 官方文档

通过上述步骤，您应该能够在父组件的表格中显示el-select选择框选中的label值。如果您在实现过程中遇到任何问题，可以参考上述资料或寻求社区的帮助。