首页 > 其他分享 >vue2+antd 使用select 通过v-model 无法回显也不能修改?

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

时间:2023-11-08 21:33:51浏览次数:39  
标签:选项 变量 回显 value label vue2 antd selectedValue

<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>

从提供的代码看,你使用了 Ant Design Vue 的 Select 组件,并使用 v-model 来绑定选中的值,但是无法回显也不能修改。

问题可能出在你的代码中,你在循环渲染 Select 的选项时,使用了同一个 v-model 变量 selectedValue,这导致所有选项都绑定到同一个值上,无法正确回显或修改。

解决这个问题的方法是,为每个选项使用不同的 v-model 变量。你可以在 data 中为每个选项定义一个变量,并在 Select 组件中绑定对应的变量。这样每个选项都有自己独立的状态,就能正确回显和修改了。

以下是修改后的代码示例:

...
<a-select v-model="record.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>
...
export default {
  name: "executionInfo",
  data() {
    return {
      dataList: [
        {
          index: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          selectedValue: "3"  // 为每个选项定义独立的变量
        }
      ],
      options: [
        { value: "1", label: "选项1" },
        { value: "2", label: "选项2" },
        { value: "3", label: "选项3" }
      ]
    };
  },
  methods: {
    handleChange(value, record) {
      record.selectedValue = value;  // 修改独立的变量
    }
  }
};

通过为每个选项定义独立的变量进行绑定,你就能够正确地回显和修改 Select 组件的值了。

标签:选项,变量,回显,value,label,vue2,antd,selectedValue
From: https://blog.51cto.com/M82A1/8259100

相关文章

  • vue2获取cookie/删除cookie/设置cookie
    起因,访问不同路由跳到首页/需登录账号demo<template><div><button@click="setCookie">设置Cookie</button><button@click="getCookie">获取Cookie</button><button@click="deleteCookie">删除Cook......
  • 流式数据库引擎备受关注,亚信安慧AntDB数据库受邀参加“2023中国PostgreSQL数据库生态
    11月3日至5日,2023中国PostgreSQL数据库生态大会在北京中科院软件所大报告厅盛大召开,大会现场百余位专家学者、企业、用户代表及线上数千位观众,就近年来国产数据库技术与市场变革进行深入探讨。湖南亚信安慧科技有限公司(简称:亚信安慧)受邀参与主论坛发表了重要演讲,并荣膺“2023最佳......
  • 解决antd与tailwind样式冲突问题(Button透明)
    解决antd与tailwind样式冲突问题(Button透明)1、在tailwind.config.js文件中添加corePlugins:{preflight:false}tailwind.config.js变成/**@type{import('tailwindcss').Config}*/exportdefault{content:['./src/**/*.{js,jsx,ts,tsx}'],theme:{......
  • vue2 - require is not defined
    vue.config.js文件中module.exports=defineConfig({transpileDependencies:['require'],...将transpileDependencies属性值改未false或者['require']时即可。虽然不太清除具体原理但是问题解决了,如果有大佬知道希望评论解答一下,谢谢。......
  • vscode快捷输入vue2,vue3,模板
    { //Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippetnameandhasaprefix,bodyand //description.Theprefixiswhatisusedtotriggerthesnippetandthebodywillbeexpandedandinserted.Possiblevariablesare: //$1,......
  • wsl wangEdit 的使用与注意事项( vue2 版本)
    注:vue2版本的nodeJs版本有限制,要是16或者17;1.安装wangEditoryarnadd@wangeditor/editor@wangeditor/editor-for-vue 2.使用示例<template><divstyle="border:1pxsolid#ccc;"><!--工具栏--><Toolbarstyl......
  • Antd Form 表单数据没法回显问题
    AntdForm表单数据没法回显问题antd环境4.*版本问题复现在一个组件中,给这个组件传递一个配置项,展示一些表单组件如输入框、下拉框等组件,再传递一个数据,让其数据回显在我们的表单组件中//就正常一个表单,里面通过循环配置项展示formitem里的内容,我们可以在formitem中设......
  • vue select-option组件 普通下拉和远程下拉数据展示及回显
    前言:后台返回的数据格式有如下两种类型:1、json格式:codeTypeMap:{  "000":"身份证",  "001":"户口本"}2、数组格式:codeTypeMapList:[  {code:"000",name:"身份证"},  {code:"000",name:"户口本"}] 一、普......
  • 【keng】 Vue2 多次传参进入同一页面 页面不走生命周期函数
    比如一个搜索跳转功能 搜索123进入页面加载数据再次搜索456 还是进入这个页面这个页面就不会走生命周期了 解决方案在App.vue上为router-view增加一个key 这个key就是随便写一个随机数就可以不要重复eg:  ......
  • vue2 单页面应用兼容 ie & 对象不支持"append"属性或方法
    在平时如果用到vue2但是打开ie测试的时候发现代码没起到预期的效果(作用)的话。就要用到polyfill和browser来对你的vue代码转成es5语法啦。具体用法是:先下载polyfill和browser的js文件然后引入polyfill和browser的js文件1<scriptsrc="./graphic_js/pol......