精华内容
下载资源
问答
  • vue select下拉框绑定默认值:首先option要加value值,以便v-model可以获取到对应选择的值一、当没有绑定v-model,直接给对应的option加selected属性二、当给select绑定了v-model的值的时候,要给v-model绑定的data...

    vue select下拉框绑定默认值:

    首先option要加value值,以便v-model可以获取到对应选择的值

    一、当没有绑定v-model,直接给对应的option加selected属性

    二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值

    新增学习记录

    学习内容标题

    学习详细内容

    分类情况

    {{type.name}}

    添加学习内容

    亲的学习内容已经发布成功

    内容概览

    内容描述: {{content.desc}}

    内容详细描述: {{content.details}}

    内容详细描述: {{content.tid}}

    export default {

    data() {

    return {

    content:{

    id:"",

    tid:"1",

    uid:"",

    datetime:"",

    desc:"",

    details:""

    },

    types:[],

    submmited: false,

    id:"1"

    }

    },

    methods: {

    post: function(){

    this.$http.post('http://localhost:8085/content/add', this.content)

    .then((data) =>{

    console.log(data);

    console.log(this.submmited);

    this.submmited= true;

    console.log(this.submmited);

    });

    }

    },

    created(){

    this.$http.get('http://localhost:8085/type/showall', true)

    .then(function(response){

    this.types=response.data;

    console.log(this.types);

    })

    //,this.content.id=this.types[0].id

    }

    }

    /*

    #learn-insert *{

    box-sizing: border-box;

    }

    #learn-insert{

    margin: 20px auto;

    max-width: 600px;

    padding: 20px;

    }

    */

    label{

    display: block;

    margin: 20px 0 10px;

    }

    input[type="text"],textarea,select{

    display: block;

    width: 100%;

    padding: 8px;

    }

    textarea{

    height: 200px;

    }

    #checkboxes label{

    display: inline-block;

    margin-top: 0;

    }

    #checkboxes input{

    display: inline-block;

    margin-right: 10px;

    }

    button{

    display: block;

    margin: 20px 0;

    background: crimson;

    color: #fff;

    border: 0;

    padding: 14px;

    border-radius: 4px;

    font-size: 18px;

    cursor: pointer;

    }

    #preview{

    padding: 10px 20px;

    border: 1px dotted #ccc;

    margin: 30px 0;

    }

    h3{

    margin-top: 10px;

    }

    展开全文
  • 实现效果如下: 具体代码入下: 1、其中:filterable :filter-method="dataFilter"为过滤的关键 <el-col :span="24" v-if="showTransact"> <el-form-item label="New Issue Owner:">...

    实现效果如下:
    在这里插入图片描述
    在这里插入图片描述
    具体代码入下:
    1、其中:filterable :filter-method="dataFilter"为过滤的关键

     <el-col :span="24" v-if="showTransact">
                        <el-form-item label="New Issue Owner:">
                        <el-select v-model="form.turn_to_transact" :disabled='isEditResolution' placeholder="Please Choose Administrative Person" filterable :filter-method="dataFilter" clearable>
                                <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
    

    2、dataFilter的方法
    首先要初始化一个approveUserOption,并且让optionsCopy = approveUserOption。如果为则给optionsCopy 复制approveUserOption。

        dataFilter(val) {
            if (val) { //val存在
            debugger;
               var str = ".*"+val.toLowerCase()+".*"
               let reg = new RegExp(str)
              this.optionsCopy = this.optionsCopy.filter((item) => {
                if(item.label){
                    return reg.test((item.label.toLowerCase()).replaceAll(" ",""))
                }else{
                    return false;
                }
              })
            }else{
                this.optionsCopy = this.approveUserOption;
            }
            if(this.optionsCopy.length == 0){
                this.optionsCopy = this.approveUserOption;
            }
          }
    
    展开全文
  • arr[i].colId = data.colId } } }, // 站点 禁选 merOrCityChange(data,data2){ // data 原始数据 data2 站点下拉框--站点 (必须都是数组) let arr = [] if(!data || !data2 || data.length || data2.length )...

    v-for="(domain, index) in dynamicValidateForm.domains"

    :label="'站点' + index"

    :key="domain.id"

    >

    v-for="item in testData"

    :key="item.id"

    :label="item.testName"

    :value="item.id"

    :disabled="item.disabled">

    style="height: auto"

    :value="domain.colName">

    删除

    @click="addDomain">添加站点

    测试

    export default {

    name: "PushManagement",

    data(){

    return {

    dynamicValidateForm: {

    domains: [{

    colName: '', // 栏目名称

    id: null, // 站点id

    colId: null, // 栏目id

    children: [] // 站点下的栏目列表

    }],

    },

    testSiteId: null,

    defaultProps: {

    children: 'children',

    label: 'name'

    },

    testData: [{

    testName: '站点一',

    id: 1,

    children: [{

    name: '栏目一',

    colId: 11

    },{

    name: '栏目二',

    colId: 12,

    children: [{

    name: '栏目二 - 子栏目',

    colId: 121,

    }]

    }]

    },{

    testName: '站点二',

    id: 2,

    children: [{

    name: '栏目三',

    colId: 21

    },{

    name: '栏目四',

    colId: 22,

    children: [{

    name: '栏目四 - 子栏目',

    colId: 221,

    }]

    }]

    },{

    testName: '站点三',

    id: 3,

    children: [{

    name: '栏目五',

    colId: 31

    },{

    name: '栏目六',

    colId: 32,

    children: [{

    name: '栏目六 - 子栏目',

    colId: 321,

    }]

    }]

    }],

    // 回显站点 栏目

    echoSiteData: [{

    id: 2,

    colId: 21,

    colName: "栏目三"

    }, {

    id: 3,

    colId: 321,

    colName: "栏目六 - 子栏目"

    }]

    }

    },

    methods: {

    submitForm(formName) {

    this.$refs[formName].validate((valid) => {

    if (valid) {

    alert('submit!');

    console.log(this.dynamicValidateForm)

    } else {

    console.log('error submit!!');

    return false;

    }

    });

    },

    removeDomain(item) {

    var index = this.dynamicValidateForm.domains.indexOf(item)

    if (index !== -1) {

    this.dynamicValidateForm.domains.splice(index, 1)

    this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

    }

    },

    addDomain() {

    this.dynamicValidateForm.domains.push({

    colName: '',

    id: null,

    colId: null,

    children: []

    });

    },

    // 栏目点击 绑定栏目对应的站点id

    colSelClick(id){

    // console.log('点击栏目')

    // console.log(id)

    this.testSiteId = id

    },

    // 站点下拉框 改变

    testSite(id){

    this.testSiteId = id

    let testColData = {}

    for(let i = 0; i< this.testData.length; i++){

    if(this.testData[i].id == id){

    testColData = this.testData[i]

    }

    }

    let data = this.dynamicValidateForm.domains

    for(let i = 0; i < data.length; i++){

    if(data[i].id == testColData.id){

    data[i].colName = ''

    data[i].colId = null

    data[i].children = testColData.children

    }

    }

    // console.log('是否存在站点id')

    // console.log(this.dynamicValidateForm.domains)

    this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

    },

    // 栏目选择树 改变

    handleNodeClick(data,node,obj) {

    // console.log('下拉框')

    // console.log(data)

    // console.log(this.testSiteId)

    // console.log( this.dynamicValidateForm)

    let arr = this.dynamicValidateForm.domains

    for(let i = 0; i < arr.length; i++){

    if(arr[i].id == this.testSiteId){

    arr[i].colName = data.name;

    arr[i].colId = data.colId

    }

    }

    },

    // 站点 禁选

    merOrCityChange(data,data2){ // data 原始数据 data2 站点下拉框--站点 (必须都是数组)

    let arr = []

    if(!data || !data2 || data.length <= 0 || data2.length <= 0)return

    for(let i = 0; i < data.length; i++){

    for(let j = 0; j < data2.length; j++){

    data[i].disabled = false

    if(data[i].id == data2[j].id){

    arr.push(data[i])

    }

    }

    }

    // console.log('存在的站点id')

    // console.log(arr)

    if(arr.length > 0){

    for(let i = 0; i< data.length; i++){

    for(let j = 0; j< arr.length;j++){

    if(data[i].id == arr[j].id){

    data[i].disabled = true

    }

    }

    }

    }

    },

    // 回显 站点栏目

    echoSite(echoSiteData){

    if(echoSiteData.length > 0){

    this.dynamicValidateForm.domains = []

    for(let i = 0; i

    for(let j = 0; j < echoSiteData.length; j++){

    if(this.testData[i].id === echoSiteData[j].id){

    this.dynamicValidateForm.domains.push({

    colName: echoSiteData[j].colName,

    id: echoSiteData[j].id,

    colId: echoSiteData[j].colId,

    children: this.testData[i].children

    });

    }

    }

    }

    this.merOrCityChange(this.testData,this.dynamicValidateForm.domains)

    }

    }

    },

    created(){

    this.echoSite(this.echoSiteData)

    },

    }

    展开全文
  • 概述后台管理系统里面有非常多的...我结合element ui的控件的下拉框,输入框,时间选择控件和vue-treeselect,做了一个动态表单。v-model的理解先简单讲一下vue-model是怎么玩的。其实vue-model相当于给表单元素传递...

    概述

    后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单。并且能够在外部得到渲染出来的表单的数据,可以对表单进行重置操作。我结合element ui的控件的下拉框,输入框,时间选择控件和vue-treeselect,做了一个动态表单。

    d3f9adaf04f35a16fba8a77290e7a834.png

    v-model的理解

    先简单讲一下vue-model是怎么玩的。其实vue-model相当于给表单元素传递一个value,外部监听input事件。所以我们自己封装表单组件的时候也是可以传递一个value值,监听input事件获取输入的值。

    v-bind:value="something"

    v-on:input="something = $event.target.value">

    封装表单组件

    组件最重要的开发思想就是设计好输入输出。这里就以下拉框组件为例吧。使用的是element ui的下拉框,进行一个简单封装。

    输入:name:每个表单的数据标识,如区域编码输入框,父元素应该传递areaCode过来。

    value: 表单选择/输入的值,从父元素获取后赋值给currentValue,通过监听父元素的值实现同步变

    化。

    options:下拉框要渲染的选项值,一般是个对象数组。

    输出:onInputEvent,emit一个input事件,让父元素能够感知组件的数据变化。

    也就是可以在组件使用的地方监听input事件

    v-for="item in options"

    :key="item.value"

    :label="item.label"

    :value="item.value">

    import formMixins from '../../../mixins/form-model'

    export default {

    name: "SelectList",

    props: ['name', 'label', 'value','options'],

    mixins: [formMixins],

    data() {

    return {

    currentValue: this.value

    }

    },

    methods: {

    onInputEvent(value) {

    this.$emit('input', this.name, value);

    }

    },

    watch: {

    value(val) {

    this.currentValue= val;

    }

    }

    }

    一点封装

    由于每个表单组件都是监听父元素的value值变化,数据变化时都是触发onInputEvent并执行this.$emit('input'),所以我们可以把这部分内容抽取出来放在mixins里面。

    form-model.js

    export default {

    props: ['name', 'value'],

    data () {

    return {

    currentValue: this.value

    };

    },

    methods: {

    onInputEvent(value) {

    this.$emit('input', this.name, value);

    },

    reset() {

    this.currentValue = "";

    }

    },

    watch: {

    value (val) {

    this.currentValue = val;

    }

    }

    };

    然后我们的下拉框组件就可以少写一些共用的代码,直接用 mixins: [formMixins]

    v-for="item in options"

    :key="item.value"

    :label="item.label"

    :value="item.value">

    import formMixins from '../../../mixins/form-model'

    export default {

    name: "SelectList",

    props: ['name', 'label', 'value', 'options'],

    mixins: [formMixins],

    data() {

    return {

    currentValue: this.value

    }

    }

    }

    动态生成表单

    这里主要是根据配置的数据,循环生成表单组件。默认提供提交和重置按钮,如果不需要可以通过slot传递其他操作按钮。这里的要点主要有:

    监听表单组件的数据变化:

    每个表单组件都有一个name标识它的业务含义,绑定的数据也是formData[field.name],@input事件传递updateForm,在updateForm里面更新this.formData[name],保证了this.formData里面的数据是和表单组件选择/填写的内容一致。

    重置时改变表单组件的数据:

    因为组件内部会监听父元素的value,所以这里只要清空this.formData的值,组件内部的数据也会跟着清空。

    :is="field.fieldType"

    :label="field.label"

    :value="formData[field.name]"

    :multiple="field.multiple"

    @input="updateForm"

    v-bind="field"

    :options="field.options"

    :ref="field.name"

    >

    {{onSubmitText}}

    {{onResetText}}

    import SelectList from './basicComponent/SelectList'

    import TextInput from './basicComponent/TextInput'

    import TimeSelector from './basicComponent/TimeSelector'

    import SelectTree from './basicComponent/SelectTree'

    import StaffSelectPopedit from './businessComponent/StaffSelectPopedit'

    export default {

    name: "FormGenerator",

    components: { SelectList, TextInput, TimeSelector, SelectTree, StaffSelectPopedit},

    props: ["config", "value"],

    data() {

    return {

    formData: this.value,

    onSubmitText: this.config.buttons.onSubmitText || '提交',

    onResetText: this.config.buttons.onResetText || '重置'

    }

    },

    methods: {

    updateForm(fieldName, value) {

    this.formData[fieldName] = value;

    },

    submit() {

    this.$emit("submit");

    },

    reset() {

    for(var name in this.formData) {

    if(typeof this.formData === "String") {

    this.formData[name] = "";

    } else {

    this.formData[name] = null;

    }

    }

    }

    }

    }

    业务使用的地方

    像下拉框的选择数据,这些应该是后台渲染的,所以我们暂时用setTimeout模拟一下。感觉这里this.config.fieldsConfig[4].options写的不太优雅,依赖于配置数据的顺序肯定不是啥好事情。求大神指点。

    @submit="getFormData"

    v-model="formData"

    >

    import FormGenerator from '../components/form/FormGenerator'

    export default {

    name: "FormGeneratorDemo",

    components: { FormGenerator },

    created () {

    this.queryOrderType();

    this.queryAreaTree();

    },

    data() {

    return {

    formData: {

    orderCode: "",

    orderType: "",

    beginTime: "",

    endTime: "",

    area: [],

    staff:""

    },

    config: {

    fieldsConfig: [

    {

    name: 'orderCode',

    label: '定单编码',

    fieldType: 'TextInput',

    cols: 8

    },

    {

    name: 'orderType',

    label: '定单类型',

    fieldType: 'SelectList',

    options: [],

    cols: 8

    },

    {

    name: 'beginTime',

    label: '开始时间',

    fieldType: 'TimeSelector',

    cols: 8

    },

    {

    name: 'endTime',

    label: '结束时间',

    fieldType: 'TimeSelector',

    cols: 8

    },

    {

    name: 'area',

    label: '区域',

    fieldType: 'selectTree',

    options: [],

    multiple: true,

    cols: 8

    },

    {

    name: 'staff',

    label: '人员选择',

    fieldType: 'StaffSelectPopedit',

    cols: 8

    }

    ],

    buttons: {

    onSubmitText: '提交',

    onResetText: '重置'

    }

    }

    }

    },

    methods: {

    getFormData() {

    console.log(this.formData);

    },

    queryOrderType() {

    setTimeout(() => {

    this.config.fieldsConfig[1].options = [

    { label: 'select1', value: 'key1'},

    { label: 'select2', value: 'key2'},

    { label: 'select3', value: 'key3'}

    ];

    }, 100)

    },

    queryAreaTree() {

    this.config.fieldsConfig[4].options = [

    {

    id: 'a',

    label: 'a',

    children: [{

    id: 'aa',

    label: 'AA',

    }, {

    id: 'ab',

    label: 'AB',

    }],

    }, {

    id: 'b',

    label: 'B',

    }, {

    id: 'c',

    label: 'C',

    }

    ]

    }

    }

    }

    大概就是这样的思路,我们希望我们只要写上面那样子的配置数据就可以动态生成各种这样的表单组件,不用写一大堆重复代码。如果有更好的解决办法,欢迎和我联系。另外,代码路径https://github.com/supportlss...

    展开全文
  • vue 根据下拉框动态切换form的rule

    千次阅读 2018-09-28 16:14:00
    taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 = 不可以使用 this.cameraORgatewayCP = true; this.rules.gatewayCode = [{ required: true,...
  • VUE 动态绑定下拉框

    万次阅读 2018-05-02 10:27:56
    vue 实例: 这边的selected:0 是初始值,就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。 这样就实现了下拉框和span元素中内容的联动,这种办法最简便。 绑定并实现联动: .....
  • vue select下拉框绑定默认值:首先option要加value值,以便v-model可以获取到对应选择的值一、当没有绑定v-model,直接给对应的option加selected属性二、当给select绑定了v-model的值的时候,要给v-model绑定的data...
  • //动态添加表单元素 $f.append($r,'goods_name'); } }) $formCreate 参数 rules 表单生成规则 [inputRule,selectRule,...] options 初始化配置参数 (详细见底部 createOptions) $formCreate.maker 组件规则生成器 ...
  • vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一、当没有绑定v-model,直接给对应的option加selected属性 二、当给select绑定了v-model的值的时候,要给v-model...
  • 本文实例讲述了vue动态select的使用方法。分享给大家供大家参考,具体如下:html代码如下:通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容{{types.name}}js中写如:export ...
  • 问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误jsp 下拉菜单 {{item.plantModelName}}JSnew Vue({el : "#vueadd",data : {vueObj : {},selectlist : []},created : ...
  • :data="tableData"borderstyle="width: 100%">v-for="(item,index) in filedROptions":key="item.value":label="item.label":value="item.value">data(){return{filedR:[],filedROptions:[{"label":"uid","val...
  • 1.vue在列表项上通过render方式渲染一个select,选项的options是动态的,在render内通过循环来渲染,如何实现呢?描述不清晰,请见代码:2.data(){return {memberList:[{"name":"张三","id":1},{"name":"李四","id":2...
  • 问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误jsp 下拉菜单 {{item.plantModelName}}JSnew Vue({el : "#vueadd",data : {vueObj : {},selectlist : []},created : ...
  • arr[i].colId = data.colId } } }, // 站点 禁选 merOrCityChange(data,data2){ // data 原始数据 data2 站点下拉框--站点 (必须都是数组) let arr = [] if(!data || !data2 || data.length || data2.length )...
  • <template> <divclass="lin-container"> <divclass="lin-wrap-ui"> <el-cardclass="box-card"style="margin-bottom:50px;padding-bottom:20px;"> <divclas...
  • arr[i].colId = data.colId } } }, // 站点 禁选 merOrCityChange(data,data2){ // data 原始数据 data2 站点下拉框--站点 (必须都是数组) let arr = [] if(!data || !data2 || data.length || data2.length )...
  • 最近在一个 Vue 的项目中重构功能时,遇到一个有趣的问题,场景是通过接口动态获取名称并显示在下拉列表中,第一次实现的代码如下:但这样写代码可扩展性很低,例如这时候需要添加一个查询用户身份的下拉框就要再写...
  • 本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流 公众号:Linux下撸python 能得指点是晚辈荣幸絮叨一下简单介绍安装方法scriptnpm下载创建一个实例挂载点el存放数据data函数methods第一个hello vue指令v-...
  • vue中可以使用对象数组和v-for去循环创造出一个下拉框 代码如下 <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script> ...
  • <el-form-item label="Business Unit"> <el-select v-model="UserForm.BusinessUnitIds" placeholder="" multiple style="width:100%" @change="change()" > <el-option v-for="item in ...
  • vue组件-动态搜索下拉框组件

    千次阅读 2018-10-30 10:52:39
    组件dropdown.vue代码如下: &lt;template&gt; &lt;div class="vue-dropdown default-theme"&gt; &lt;div class="search-module clearfix"&gt; &lt;input class...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 146
精华内容 58
关键字:

vue动态下拉框

vue 订阅