vue2+antd 使用select 通过v-model 无法回显也不能修改？

Z时代
2024-03-12
分类：IT

<template>
  <a-table size="middle" :data-source="dataList" :pagination="false" :locale="{ emptyText: '暂无数据' }" :scroll="{ x: 'max-content' }">
    <a-table-column title="汇率" align="center">
      <template #default="{record}">
        <a-select v-model="selectedValue" style="width:150px" @change="handleChange">
          <a-select-option v-for="option in options" :key="option.value" :value="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
        <button @click="()=>{ this.selectedValue = '3' }">33</button>
      </template>
    </a-table-column>
  </a-table>
</template>
<script>
export default {
  name: "executionInfo",
  data() {
    return {
      dataList: [
        {
          index: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park"
        }
      ],
      options: [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" }
      ],
      selectedValue: '3',
    };
  },
  methods: {
    handleChange(value) {
       this.selectedValue = value;
    }
  },
  mounted() {
    // this.handleChange(this.selectedValue);
    this.selectedValue = '3'
  }
};
</script>
<style lang="less" scoped></style>

回答：

<template>
  <a-table size="middle" :data-source="dataList" :pagination="false" :locale="{ emptyText: '暂无数据' }" :scroll="{ x: 'max-content' }">
    <a-table-column title="汇率" align="center">
      <template #default="{record, index}">
        <a-select :value="record.selectedValue" style="width:150px" @change="value => handleChange(value, record)">
          <a-select-option v-for="option in options" :key="option.value" :value="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>
        <button @click="setSelectedValueTo3(record)">Set to 3</button>
      </template>
    </a-table-column>
  </a-table>
</template>
<script>
export default {
  name: "executionInfo",
  data() {
    return {
      dataList: [
        {
          index: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          selectedValue: '1' // 初始值
        }
      ],
      options: [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" }
      ],
    };
  },
  methods: {
    handleChange(value, record) {
       record.selectedValue = value;
    },
    setSelectedValueTo3(record) {
      record.selectedValue = '3';
    }
  }
};
</script>