精华内容
下载资源
问答
  • 2021-09-17 15:44:48

    Vue下拉框动态加载数据

    <template>
    	<a-select v-model="model.type" show-search placeholder="请选择下拉框数据" style="width: 100%">
    		<a-select-option v-for="item in info" v-bind:key="item.id" :value="item.id">
    		    {{item.name }}
    		</a-select-option>
    	</a-select>
    </template>
    
    <script>
    import { httpAction, getAction } from '@/api/manage'
    
    export default {
      name: 'CqTaskForm',
      components: {},
      data() {
        return {
        	info: [],
        },
        url: {
        	info: '**********',
        },
      },
      created() {
        this.getPublisher();
      },
      method:{
    	getAction(this.url.info).then((res) => {
    		if(res && res.success) {
    			this.info = res.data
    		}
    	})
     }
    }
    </script>
    
    更多相关内容
  • 下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 效果如下 父文件 <template> <div class="parent-selete_header-color"> <...import selete from '@/pages/demo/selete.vue'; export default { components: { selete } }; </s

    效果如下

    在这里插入图片描述
    父文件

    <template>
      <div class="parent-selete_header-color">
        <selete></selete>
      </div>
    </template>
    
    <script>
    import selete from '@/pages/demo/selete.vue';
    export default {
      components: { selete }
    };
    </script>
    
    <style lang="less" scoped>
    /deep/ .ivu-select-selection {
      border: none;
    }
    /deep/ .ivu-select-visible .ivu-select-selection {
      border: none;
      box-shadow: none;
    }
    /deep/ .ivu-icon.ivu-icon-ios-arrow-down.ivu-select-arrow {
      display: flex;
      justify-content: center;
      align-items: center;
      position: static;
    }
    /deep/ .ivu-select-visible .ivu-select-arrow {
      transform: translateY(0) rotate(180deg);
    }
    /deep/ .ivu-select-selection > div {
      display: flex;
    }
    /deep/ .ivu-select-arrow {
      transform: translateY(0);
    }
    /deep/ .ivu-select-dropdown {
      min-width: auto !important;
    }
    </style>
    
    

    子文件

    <template>
      <div v-if="modelObj">
        <!-- <Button type="primary">Primary</Button>
        <ceshi></ceshi> -->
    
        <div v-for="(item, index) in dataObj" :key="index">
          <Select v-model="item.key" style="margin: 50px">
            <Option v-for="subItem in item.value" :value="subItem.value" :key="subItem.value">{{ subItem.label }}</Option>
          </Select>
          {{ item.key }}
        </div>
      </div>
    </template>
    
    <script>
    // import Ceshi from '@/pages/demo/ceshi.vue';
    export default {
      components: {
        // Ceshi
      },
      created() {},
      data() {
        return {
          modelObj: {},
          dataObj: {
            cityList: {
              key: 'Ottawa',
              value: [
                {
                  value: 'Ottawa',
                  label: 'Ottawa'
                },
                {
                  value: 'Paris',
                  label: 'Paris'
                },
                {
                  value: 'Canberra',
                  label: 'Canberra1111111111'
                }
              ]
            },
            cityList2: {
              key: 'Canberra2',
              value: [
                {
                  value: 'Ottawa2',
                  label: 'Ottawa'
                },
                {
                  value: 'Paris2',
                  label: 'Paris'
                },
                {
                  value: 'Canberra2',
                  label: 'Canberra1111111111'
                }
              ]
            }
          }
        };
      }
    };
    </script>
    
    <style lang="less" scoped></style>
    
    

    Vue+element动态追加输入框、下拉框,动态绑定v-model

    一、开发时候遇到动态添加筛选件(输入框、下拉框)问题,需要做成的效果如下
    在这里插入图片描述
    二、代码实现
    (1)template部分

    <el-collapse-item title="查询条件" name="1">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
         <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'条件' + index" :key="domain.key" :prop="'domains.' + index + '.value'">
          <el-select v-model="names[index]" placeholder="请选择">
           <el-option v-for="item in select_name1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select v-model="ranges[index]" placeholder="请选择">
           <el-option v-for="item in range1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input v-model="values[index]" placeholder="请输入内容" style="width: 30%;" clearable></el-input>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
         </el-form-item>
         <el-form-item>
          <el-button @click="addDomain">新增条件</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
         </el-form-item>
        </el-form>
       </el-collapse-item>
    

    (2)data值

    export default {
     data() {
      return {
       dynamicValidateForm: {
        domains: [
         {
          value: ''
         }
        ]
       },
       names: {}, //匹配字段1
       ranges: {}, //匹配
       values: {}, //匹配内容
       }
    

    (3) 事件

    resetForm(formName) {
       this.$refs[formName].resetFields();
      },
      removeDomain(item) {
       var index = this.dynamicValidateForm.domains.indexOf(item);
       if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
       }
      },
      addDomain() {
       this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
       });
      },
      //查询
      sefun() {
       console.log('字段',this.names);//匹配字段
       console.log('范围',this.ranges);//匹配范围
        console.log('内容',this.values);//匹配内容 
       // console.log(this.values[1]);
       
      },
    
    展开全文
  • VUE 动态绑定下拉框

    万次阅读 2018-05-02 10:27:56
    数据源: vue 实例: 这边的selected:0 是初始值,就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。 这样就实现了下拉框和span元素中内容的联动,这种办法最简便。 绑定...

    数据源:

     

     

    vue 实例:

    这边的selected:0 是初始值,就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。

    这样就实现了下拉框和span元素中内容的联动,这种办法最简便。

    绑定并实现联动:

    展开全文
  • 向下列表格绑定数据 <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <el-table-...

    向下列表格绑定数据

    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="角色编号" prop="roleId" width="120"/>
          <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150"/>
          <el-table-column label="学院名称" prop="college_name" :show-overflow-tooltip="true" width="150"/>
          <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150"/>
          <el-table-column label="显示顺序" prop="roleSort" width="100"/>
          </el-table-column>
        </el-table>
    

    在这里插入图片描述

    使用这种方式( this.$set(this,“roleList”,response.rows);)绑定数据后刷新列表

     methods: {
          /** 查询角色列表 */
          getList() {
            this.loading = true;
            listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.$set(this,"roleList",response.rows);
              }
            );
          },
     }
    
    展开全文
  • 数据已经修改了,下拉框的值还是空的 监听数据变化,进行强制重新渲染就好了 watch:{ handler(val){ this.dataList = deepClone(val) this.$forceUpdate() }, deep:true, immediate: true }
  • VUE下拉框获取value值

    2020-07-31 16:57:06
  • 原因很弱智,data中没有初始化,却直接使用,第一次对List赋值时没问题,下拉框能够找到数据,改变List中的值后,下拉框中的值不会跟着List而改变,找了一大圈,发现没有对List在data中进行初始化。 ...
  • select 下拉选择 产品类型:这一项是select 涉及到父子组件信息传递 下面拆开讲解 父组件 产品类型: (> </div>
  • 一、今天遇到vue下拉框问题,故而写点东西留个脚印 <select v-model='selected' @click=disable()> (option,index) v-bind:value=option.value disabled=option.disabled> {{ option.text }}{{index}}{...
  • 绑定下拉框其中有两种一种是自定义,一种是数据库接口获取 一、自定义 1.下拉列表绑定 <el-col :span="10" :offset="2"> <cs-form-item :label="'计量单位'"> <cs-field-select :placeholder="'请...
  • vue下拉框返回后端数据库数据

    千次阅读 2022-03-13 13:13:27
    使用elmui下拉框组件 <el-form-item prop="roleIdList" :label="$t('user.roleIdList')" class="role-list"> <el-select v-model="dataForm.roleIdList" multiple :placeholder="$t('user.roleIdList')"&...
  • 父组件中创建下拉框 template中的代码 <template> <el-option v-for="item in options" :label="item.text" :key="item.value" :value="item.text"> </el-option> </el-select> </...
  • Vue ——下拉框数据数据回显

    千次阅读 2021-08-18 16:14:53
    下拉框默认显示第一个数据,及获取下拉框中选择的任意数据: <label>类型:</label> <select v-model="value_type" @change="getvalue_typeected(value_type)"> <option :value="item" v-for...
  • Vue.js:Select--Option >下拉框绑定和取值

    万次阅读 2018-08-07 10:09:35
    遇到了这个解决了,所以记录...完成vue.js下拉框选择绑定与取值,实现效果图如下:     template代码   &lt;template&gt; &lt;div&gt; &lt;Form :model="formItem" r...
  • select动态绑定vue.js

    千次阅读 2018-07-20 09:49:22
    动态选项,用 v-for 渲染: &lt;select v-model="selected"&gt; &lt;option v-for="option in options" v-bind:value="option.value"&gt; {{ option.text }} ...
  • vue select下拉框绑定默认值

    千次阅读 2017-12-11 10:14:00
    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一、当没有绑定v-model,直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候,要给v-model绑定...
  • Vue单选框多选框输入绑定 此处绑定的是value <div> <form> <input type="radio" value="1" v-model="e" />1 <input type="radio" value="2" v-model="e" />2 </form> {{e}} <...
  • 主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VUE下拉框双向联动

    千次阅读 2022-04-01 19:59:30
    VUE实现多个下拉框双向联动效果
  • 首次加载时默认值都为空而且被影藏,选择了需要修改字段时,在监听中才被赋值,二下拉框绑定字段时绑定的lable 问题的解决: 如果使用在watch中赋值给每个字段的这种方法,可以在获取的下拉列表中使用push方法,...
  • 根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定。所以通过数据的id或者下标进行变量拼接。页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code...
  • 一、开发时候遇到动态添加筛选件(输入框、下拉框)问题,需要做成的效果如下 二、代码实现 (1)template部分 <el-collapse-item title="查询条件" name="1"> <el-form :model="dynamicValidateForm" ...
  • vue select下拉框绑定值不跟着变问题

    千次阅读 2020-12-22 09:18:30
    } v-for="_item in type":value="_item.id":key="_item.id">{{ _item.name }} 基于引用类型数据,预先map原list,新增v-model绑定的value到每条数据里,最后再从list里面遍历取结果 拿到list的时候根据length新增...
  • vue select下拉框绑定默认值:首先option要加value值,以便v-model可以获取到对应选择的值一、当没有绑定v-model,直接给对应的option加selected属性二、当给select绑定了v-model的值的时候,要给v-model绑定的data...
  • 前端要动态绑定到一个下拉选择框中,遍历数组方便,那遍历对象呢,如何才能正确显示他的key, value呢,代码如下: <el-select clearable v-model=“addform.ddd” placeholder=“请选择” @change=“c...
  • :value与v-model的值是互相绑定的,可以在data中定义变量进而直接获取到 如图,可以通过this,paneOneForm.villageId拿到value中绑定的id值 获取选中的文本值,即label值,结合使用数组的find方法 let obj = {} obj ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,237
精华内容 1,694
关键字:

vue下拉框动态绑定数据

友情链接: FeiQChatClient.rar