当前位置: 首页 > 知识库问答 >
问题:

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

汪深
2023-11-08
<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>

共有1个答案

裴欣荣
2023-11-08
<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>
 类似资料:
  • 本文向大家介绍vue2 v-model/v-text 中使用过滤器的方法示例,包括了vue2 v-model/v-text 中使用过滤器的方法示例的使用技巧和注意事项,需要的朋友参考一下 Vue.js 允许自定义过滤器,一般可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: 可以在

  • antd的select组件,高度是32,没有圆角。 ui说需要改成 高度28,圆角5px。 要怎么改全局都生效?

  • 会在 iOS 上出现 v-model 在 textarea 上不生效的问题,原因是在 iOS 真机上,无法动态在 textarea 设置 data-,即: <textarea data-cid="{{cid}}" bindinput="onInput"></textarea> 当 input 事件触发时,无法从事件对象上取得 dataCid 的值,从而无法根据上面的信息找到对于的事件处理方法。

  • vue2.7 使用setup语法糖 但是想实现自定义v-model 却发现语法糖不支持model: { prop: '', event: ''} 尝试了modelValue 发现不支持 我现在只能使用defineComponent,用optionsApi实现

  • 本文向大家介绍vue.js使用v-model指令实现的数据双向绑定功能示例,包括了vue.js使用v-model指令实现的数据双向绑定功能示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考,具体如下: vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍:

  • 本文向大家介绍vue中v-model对select的绑定操作,包括了vue中v-model对select的绑定操作的使用技巧和注意事项,需要的朋友参考一下 1、单选时 如果 v-model表达式的value初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这