-
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下拉框绑定和取值方法
2020-10-18 17:19:40下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
vue 动态追加输入框 下拉框 动态v-model绑定
2022-03-27 22:33:08效果如下 父文件 <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元素中内容的联动,这种办法最简便。
绑定并实现联动:
-
Vue 下拉列表绑定数据并刷新数据(this.$set(this,“roleList“,this.roleList);)
2022-02-11 14:29:22向下列表格绑定数据 <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); } ); }, }
-
vue子组件下拉框的值动态更新
2022-04-19 11:00:58数据已经修改了,下拉框的值还是空的 监听数据变化,进行强制重新渲染就好了 watch:{ handler(val){ this.dataList = deepClone(val) this.$forceUpdate() }, deep:true, immediate: true } -
VUE下拉框获取value值
2020-07-31 16:57:06 -
vue + element 下拉框 选项绑定数据列表List,List动态变化后,下拉框下拉后数据不变化问题解决
2019-01-15 17:57:53原因很弱智,data中没有初始化,却直接使用,第一次对List赋值时没问题,下拉框能够找到数据,改变List中的值后,下拉框中的值不会跟着List而改变,找了一大圈,发现没有对List在data中进行初始化。 ... -
详解vuejs2.0 select 动态绑定下拉框支持多选
2020-12-29 12:50:50select 下拉选择 产品类型:这一项是select 涉及到父子组件信息传递 下面拆开讲解 父组件 产品类型: (> </div> -
基于vue.js中关于下拉框的值默认及绑定问题
2021-01-19 18:09:40一、今天遇到vue中下拉框问题,故而写点东西留个脚印 <select v-model='selected' @click=disable()> (option,index) v-bind:value=option.value disabled=option.disabled> {{ option.text }}{{index}}{... -
vue绑定下拉框——vscode
2021-03-19 10:52:05绑定下拉框其中有两种一种是自定义,一种是数据库接口获取 一、自定义 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')"&... -
VUE 创建下拉框并在子组件中动态获取下拉框中的值
2021-11-10 10:18:18父组件中创建下拉框 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代码 <template> <div> <Form :model="formItem" r... -
select动态绑定vue.js
2018-07-20 09:49:22动态选项,用 v-for 渲染: <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} ... -
vue select下拉框绑定默认值
2017-12-11 10:14:00vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一、当没有绑定v-model,直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候,要给v-model绑定... -
Vue单选框多选框下拉框输入绑定
2021-08-05 13:35:56Vue单选框多选框输入绑定 此处绑定的是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值不变问题
2020-10-15 00:01:48主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
VUE下拉框双向联动
2022-04-01 19:59:30VUE实现多个下拉框双向联动效果 -
2021-07-28VUE下拉框默认值设置
2021-07-28 09:45:02首次加载时默认值都为空而且被影藏,选择了需要修改字段时,在监听中才被赋值,二下拉框中绑定字段时绑定的lable 问题的解决: 如果使用在watch中赋值给每个字段的这种方法,可以在获取的下拉列表中使用push方法,... -
Vue select 绑定动态变量
2021-10-25 10:11:47根据后台的数据生成多个select,由于数据的数量不定,所以v-model绑定的变量名也不定。所以通过数据的id或者下标进行变量拼接。页面能够成功渲染,但是当进行下拉框的选值时,组件不刷新,选中的结果并没有展示 Code... -
Vue+element动态追加输入框、下拉框,动态绑定v-model
2021-03-30 15:22:59一、开发时候遇到动态添加筛选件(输入框、下拉框)问题,需要做成的效果如下 二、代码实现 (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中动态加载 默认选中第一个
2020-12-19 05:17:27vue select下拉框绑定默认值:首先option要加value值,以便v-model可以获取到对应选择的值一、当没有绑定v-model,直接给对应的option加selected属性二、当给select绑定了v-model的值的时候,要给v-model绑定的data... -
vue 遍历对象并动态绑定在下拉列表中
2019-06-05 08:49:59前端要动态绑定到一个下拉选择框中,遍历数组方便,那遍历对象呢,如何才能正确显示他的key, value呢,代码如下: <el-select clearable v-model=“addform.ddd” placeholder=“请选择” @change=“c... -
Vue获取下拉框中选中的value值和label值
2021-04-11 15:06:34:value与v-model的值是互相绑定的,可以在data中定义变量进而直接获取到 如图,可以通过this,paneOneForm.villageId拿到value中绑定的id值 获取选中的文本值,即label值,结合使用数组的find方法 let obj = {} obj ...