精华内容
下载资源
问答
  • vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法Cascader 级联选择何时使用代码演示 Cascader 级联选择 级联选择框。 何时使用 需要从一组...

    Cascader 级联选择

    级联选择框。

    何时使用

    • 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。
    • 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。
    • 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。

    代码演示

    基本

    在这里插入图片描述
    省市区级联。

    <template>
      <a-cascader :options="options" @change="onChange" placeholder="Please select" />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    选择即改变

    在这里插入图片描述
    这种交互允许只选中父级选项。

    <template>
      <a-cascader :options="options" @change="onChange" changeOnSelect />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    自定义已选项

    在这里插入图片描述
    例如给最后一项加上邮编链接。

    <template>
      <a-cascader
        :options="options"
        :defaultValue="['zhejiang', 'hangzhou', 'xihu']"
        style="width: 100%"
      >
        <template slot="displayRender" slot-scope="{labels, selectedOptions}">
          <span v-for="(label, index) in labels" :key="selectedOptions[index].value">
            <span v-if="index === labels.length - 1">
              {{label}} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])"
                >{{selectedOptions[index].code}}</a
              >)
            </span>
            <span v-else @click="onChange">
              {{label}} /
            </span>
          </span>
        </template>
      </a-cascader>
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                        code: 752100,
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                        code: 453400,
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
          handleAreaClick(e, label, option) {
            e.stopPropagation();
            console.log('clicked', label, option);
          },
        },
      };
    </script>
    

    可以自定义显示

    在这里插入图片描述
    切换按钮和结果分开。

    <template>
      <span>
        {{text}} &nbsp;
        <a-cascader :options="options" @change="onChange">
          <a href="#">Change city</a>
        </a-cascader>
      </span>
    </template>
    <script>
      export default {
        data() {
          return {
            text: 'Unselect',
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value, selectedOptions) {
            this.text = selectedOptions.map(o => o.label).join(', ');
          },
        },
      };
    </script>
    

    默认值

    在这里插入图片描述
    默认值通过数组的方式指定。

    <template>
      <a-cascader
        :options="options"
        @change="onChange"
        :defaultValue="['zhejiang', 'hangzhou', 'xihu']"
      />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    禁用选项

    在这里插入图片描述
    通过指定 options 里的 disabled 字段。

    <template>
      <a-cascader :options="options" @change="onChange" />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                disabled: true,
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    移入展开

    在这里插入图片描述
    通过移入展开下级菜单,点击完成选择。

    <template>
      <a-cascader
        :options="options"
        :displayRender="displayRender"
        expandTrigger="hover"
        @change="onChange"
        placeholder="Please select"
      />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
          displayRender({ labels }) {
            return labels[labels.length - 1];
          },
        },
      };
    </script>
    

    动态加载选项

    在这里插入图片描述
    使用 loadData 实现动态加载选项。

    注意:loadDatashowSearch 无法一起使用。

    <template>
      <a-cascader
        :options="options"
        @change="onChange"
        :loadData="loadData"
        placeholder="Please select"
        changeOnSelect
      />
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                isLeaf: false,
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                isLeaf: false,
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
          loadData(selectedOptions) {
            const targetOption = selectedOptions[selectedOptions.length - 1];
            targetOption.loading = true;
    
            // load options lazily
            setTimeout(() => {
              targetOption.loading = false;
              targetOption.children = [
                {
                  label: `${targetOption.label} Dynamic 1`,
                  value: 'dynamic1',
                },
                {
                  label: `${targetOption.label} Dynamic 2`,
                  value: 'dynamic2',
                },
              ];
              this.options = [...this.options];
            }, 1000);
          },
        },
      };
    </script>
    

    搜索

    在这里插入图片描述
    可以直接搜索选项并选择。

    Cascader[showSearch] 暂不支持服务端搜索,更多信息见 #5547

    大小

    在这里插入图片描述
    不同大小的级联选择器。

    <template>
      <div>
        <a-cascader size="large" :options="options" @change="onChange" /><br /><br />
        <a-cascader :options="options" @change="onChange" /><br /><br />
        <a-cascader size="small" :options="options" @change="onChange" /><br /><br />
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    自定义字段名

    在这里插入图片描述
    自定义字段名。

    <template>
      <a-cascader
        :fieldNames="{ label: 'name', value: 'code', children: 'items' }"
        :options="options"
        @change="onChange"
        placeholder="Please select"
      />
    </template>
    <script>
      const options = [
        {
          code: 'zhejiang',
          name: 'Zhejiang',
          items: [
            {
              code: 'hangzhou',
              name: 'Hangzhou',
              items: [
                {
                  code: 'xihu',
                  name: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          code: 'jiangsu',
          name: 'Jiangsu',
          items: [
            {
              code: 'nanjing',
              name: 'Nanjing',
              items: [
                {
                  code: 'zhonghuamen',
                  name: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ];
      export default {
        data() {
          return {
            options,
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    后缀图标

    在这里插入图片描述
    省市区级联。

    <template>
      <div>
        <a-cascader
          style="margin-top: 1rem"
          :options="options"
          @change="onChange"
          placeholder="Please select"
        >
          <a-icon type="smile" slot="suffixIcon" class="test" />
        </a-cascader>
        <a-cascader
          suffixIcon="ab"
          style="margin-top: 1rem"
          :options="options"
          @change="onChange"
          placeholder="Please select"
        />
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            options: [
              {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                  {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                      {
                        value: 'xihu',
                        label: 'West Lake',
                      },
                    ],
                  },
                ],
              },
              {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                  {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                      {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                      },
                    ],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          onChange(value) {
            console.log(value);
          },
        },
      };
    </script>
    

    API

    <a-cascader :options=“options” @change=“onChange” />

    参数说明类型默认值
    allowClear是否支持清除booleantrue
    autoFocus自动获取焦点booleanfalse
    changeOnSelect当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示booleanfalse
    defaultValue默认的选中项string[] | number[][]
    disabled禁用booleanfalse
    displayRender选择后展示的渲染函数,可使用 slot=“displayRender” 和 slot-scope="{labels, selectedOptions}"({labels, selectedOptions}) => vNodelabels => labels.join(' / ')
    expandTrigger次级菜单的展开方式,可选 ‘click’ 和 'hover’string'click'
    fieldNames自定义 options 中 label name children 的字段object{ label: 'label', value: 'value', children: 'children' }
    getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。Function(triggerNode)() => document.body
    loadData用于动态加载选项,无法与 showSearch 一起使用(selectedOptions) => void-
    notFoundContent当下拉列表为空时显示的内容string'Not Found'
    options可选项数据源object-
    placeholder输入框占位文本string'请选择'
    popupClassName自定义浮层类名string-
    popupStyle自定义浮层样式object{}
    popupPlacement浮层预设位置 bottomLeft bottomRight topLeft topRightEnumbottomLeft
    popupVisible控制浮层显隐boolean-
    showSearch在选择框中显示搜索框booleanfalse
    size输入框大小,可选 large default smallstringdefault
    suffixIcon自定义的选择框后缀图标string | VNode | slot-
    value(v-model)指定选中项string[] | number[]-

    showSearch 为对象时,其中的字段:

    参数说明类型默认值
    filter接收 inputValue path 两个参数,当 path 符合筛选条件时,应返回 true,反之则返回 false。function(inputValue, path): boolean
    limit搜索结果展示数量boolean50
    matchInputWidth搜索结果列表是否与输入框同宽boolean
    render用于渲染 filter 后的选项,可使用 slot=“showSearchRender” 和 slot-scope="{inputValue, path}"boolean
    sort用于排序 filter 后的选项boolean

    事件

    事件名称说明回调参数
    change选择完成后的回调(value, selectedOptions) => void
    popupVisibleChange显示/隐藏浮层的回调(value) => void

    方法

    名称描述
    blur()** 移除焦点**
    focus()** 获取焦点**

    获得中国省市区县乡镇村数据

    注意,如果需要获得中国省市区数据,可以参考 react 组件的实现 china-division

    展开全文
  • 本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的,大量的数据运算放在后...
  • 在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关selectVue.js 2.0版本中的应用,需要的朋友可以参考下
  • vue+element级联查询

    千次阅读 2019-01-10 16:30:42
    vue+element级联查询 前端代码 &lt;el-form-item label="科室"&gt; &lt;el-select v-model="formLabelAlign.type" placeholder="请选择" v-on:change="getdoctor&...

    vue+element级联查询

    前端代码

    <el-form-item label="科室">
        <el-select v-model="formLabelAlign.type" placeholder="请选择"  v-on:change="getdoctor">
          <el-option value="1" label="外科"></el-option>
          <el-option value="2" label="内科"></el-option> 
          <el-option value="3" label="儿科"></el-option> 
          <el-option value="4" label="耳鼻喉科"></el-option> 
          <el-option value="5" label="皮肤科"></el-option> 
        </el-select>
        </el-form-item>
         <el-form-item label="医生">
        <el-select v-model="formLabelAlign.doctor" placeholder="请选择">
          <el-option v-for="doctor in formLabelAlign.doctors"
          :label="doctor"
          :value="doctor"
          :key="doctor">
          </el-option>
        </el-select>
        </el-form-item>
    

    data数据

    data() {
          return {
            type1:'',
              radio:'1',
            labelPosition: 'right',
            formLabelAlign: {
              name: '',
              date1:'',
              sex: '1',
              doctor:'',
              type: '',
              date2:'',
              money:'',
              doctors:[]         
            }
          };
        }
    

    方法

    getdoctor()
          {
            console.log(this.formLabelAlign);
            if(this.formLabelAlign.type=='1')
            {
                this.type1='外科';
            }else if(this.formLabelAlign.type=='2')
            {
                this.type1='内科';
            }else if(this.formLabelAlign.type=='3')
            {
                this.type1='儿科';
            }else if(this.formLabelAlign.type=='4')
            {
                this.type1='耳鼻喉科';
            }else if(this.formLabelAlign.type=='5')
            {
                this.type1='皮肤科';
            }
            this.$axios.post('/findDoctor',{ 
                  type: this.type1,
            })
            .then(response=>{
                if(response.status==200)
                {
                  this.formLabelAlign.doctors=[];
                  this.formLabelAlign.doctor='';
                  console.log(response);
                  for(let i=0; i<response.data.length; i++)
                  {
                    this.formLabelAlign.doctors[i] = response.data[i].doctor
                  }
                  console.log(this.formLabelAlign.doctors);
                }
                else
                {
                  alert("操作失败");
                }
            })
            .catch(function (error) {
                console.log(error);
            });
          },
    
    展开全文
  • [导读]这篇文章主要介绍了基于vue2.0实现级联选择器,基于Vue级联选择器,可以单项,二级, 三级级联,多级级联基于Vue级联选择器,可以单项,二级, 三级级联,多级级联web开发中我们经常会遇到级联选择器...

    [导读]这篇文章主要介绍了基于vue2.0实现的级联选择器,基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联

    基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联

    web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况:

    单个级联 (下拉选择框,单选)

    单个级联 (多项选择)

    二级联动 (省份和城市联动)

    三级联动 (省市区联动)

    在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备。

    本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性:

    预览地址:https://zhhshen.github.io/form-orgination/docs/#/

    github地址:https://github.com/zhhshen/form-orgination

    1 后端处理数据逻辑

    这种情况是比较推荐的,大量的数据运算放在后端来进行,只需前后端商量好数据格式即可

    一般的数据格式可能如下:[{

    value: 'beijing',

    label: '北京',

    children: [{

    value: 'chaoyang',

    label: '朝阳'

    }, {

    value: 'haidian',

    label: '海淀'

    }, {

    value: 'changping',

    label: '昌平'

    }, {

    value: 'shunyi',

    label: '顺义'

    }]

    }, {

    value: 'shanghai',

    label: '上海',

    children: [{

    value: 'baoshan',

    label: '宝山'

    }, {

    value: 'jiading',

    label: '嘉定'

    }, {

    value: 'songjiang',

    label: '松江'

    }, {

    value: 'pudong',

    label: '浦东'

    }]

    }]

    特点:数据之间层级嵌套,上下级的关系很清晰

    2 前端处理数据逻辑

    这种情况适合数据量较小的数据,或者由于某种原因后端只能返给你这种数据,那所有的数据处理就需要前端来操作,最终拼成的格式也与上述情况类似,只不过是多几个或少几个字段的问题。

    数据格式可能会是这样:[{

    code: 420000,

    name: '湖北省',

    parentCode: 0

    },

    {

    code: 420100,

    name: '武汉市',

    parentCode: 420000

    },

    {

    code: 420101,

    name: '市辖区',

    parentCode: 420100

    },

    {

    code: 420102,

    name: '江岸区',

    parentCode: 420100

    },

    {

    code: 420103,

    name: '江汉区',

    parentCode: 420100

    },

    {

    code: 420104,

    name: '硚口区',

    parentCode: 420100

    },

    {

    code: 420105,

    name: '汉阳区',

    parentCode: 420100

    },

    {

    code: 421000,

    name: '荆州市',

    parentCode: 420000

    },

    {

    code: 421001,

    name: '市辖区',

    parentCode: 421000

    },

    {

    code: 421002,

    name: '沙市区',

    parentCode: 421000

    },

    {

    code: 421003,

    name: '荆州区',

    parentCode: 421000

    },

    {

    code: 430000,

    name: '湖南省',

    parentCode: 0

    },

    {

    code: 430100,

    name: '长沙市',

    parentCode: 430000

    },

    {

    code: 430101,

    name: '市辖区',

    parentCode: 430100

    },

    {

    code: 430102,

    name: '芙蓉区',

    parentCode: 430100

    },

    {

    code: 430103,

    name: '天心区',

    parentCode: 430100

    },

    {

    code: 430104,

    name: '岳麓区',

    parentCode: 430100

    }]

    特点:数据格式是个平面表,每一条数据中都带有与之相对应的上下级关系。当我们查看某个数据的上下级时,都需要重新去遍历一遍数据。

    如何在组件中使用

    import FormOrganization from '@/components/FormOrganization'

    export default {

    name: 'hello',

    data () {

    return {

    seleted: [],

    organization: [{

    value: 'beijing',

    label: '北京'

    }, {

    value: 'shanghai',

    label: '上海'

    }, {

    value: 'shenzhen',

    label: '深圳'

    }, {

    value: 'hangzhou',

    label: '杭州'

    }, {

    value: 'zhengzhou',

    label: '郑州'

    }, {

    value: 'guangzhou',

    label: '广州'

    }, {

    value: 'xiamen',

    label: '厦门'

    }]

    }

    },

    components: {

    FormOrganization

    }

    }

    API

    origanization

    Array

    级联数据源,格式必须按照第一种数据中的格式显示

    value

    Array

    选中中或默认值,可以直接用v-model语法糖,具体可以查看例子

    展开全文
  • 因业务需要,要做一个级联选择的,如下图,先选代用规格,根据选择的代用规则调接口查数据,被代用再进行选择,但是试过很多次,二级直接v-for的时候直接获取数据不行,因为是直接return的数据无法强制刷新,就将...

    因业务需要,要做一个级联选择的,如下图,先选代用规格,根据选择的代用规则调接口查数据,被代用再进行选择,但是试过很多次,二级直接v-for的时候直接获取数据不行,因为是直接return的数据无法强制刷新,就将数据拿到第一级的change里面,然后发现强制刷新也不行。

     搞的我头痛,把这个放组件里面试试

    页面直接引用这个组件

    OK,解决!

    前端基础太差,不太会说话,解释不来这个原因,可以理解为这个组件是另一个线程一样的东西,数据变动会自己刷新。嗯~~

    展开全文
  • 利用vue实现级联菜单

    千次阅读 2019-08-19 08:49:08
    select v-model = ' i ' > < option v-for = ' (prov,index) of provs ' :key = ' index ' :value = ' index ' v-text = ' prov ' > option > select > 城市: < select v-model = ' j ' > ...
  • name: 'area-select', data () { return { options:[], values:'', texts:'', props:{ value: 'id', label:'name', children: 'cities' } } }, created () { }, mounted(){ let page = this;  ...
  • 来源: ...难点:select2组件change事件要能与父级(即Vue)通信,并更新 起运港/目的港 拉下选项。vue不允许子组件更新父组价传入的对象,即只允许数据单向流入(要用$emit。测试可传v-model的input的...
  • Ant Design Vue中的cascader是专门处理级联数据的组件,使用非常简单。但在动态获取数据并回显数据方面,略有不足,无法实现回显数据前加载二级数据。需要自己编写代码来实现。 如何使用组件 引入组件 默认框架没有...
  • select id="selectLevel" resultMap="BaseResultMapS"> SELECT DISTINCT cl.`parent_name`,cl.`parent_id` FROM t_complaint_level cl </select> BaseResultMapS这是一个结果集合,封...
  • 解决Vue+elementUi级联选择器选择任意一级选项不点击圆点选中 在项目中遇到的选择地区任意一级(省市),必须点击圆点才能选中 解决方法: 在mounted中加上下面代码 setInterval(function() { // 解决级联选择器不...
  • 在我们做项目时,可能会遇到许多树形展示的数据,在编辑时要求选择当前数据所在的上级,这时就要用到级联,如图: 如何实现这种功能?在这里分三部份来说明,数据及实体类,前端展示,后台数据查询。 一、创建相关...
  • 点击选择,底部弹出选择框, 选择完成后自动关闭, 并显示选择的内容
  • html &amp;amp;amp;lt;el-cascader :options=&amp;amp;quot;valueBatch&amp;amp;quot; v-model=&... change-on-select &amp;am
  •  在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关selectVue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的...
  • vue+element级联选择器对接后台数据

    千次阅读 2019-06-10 10:23:00
    1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/*** @Auther: GGDong * @Date: 2019/4/3 10:30 */@Getter@Setterpublic class ServerList{ //值 private String ...
  • vue+ts 实现复杂级联选择

    千次阅读 2018-10-26 14:56:51
    1.vue+ ts 实现可复用组件 2.已经购买的课程显示disabled且只读 3.点击每级的checkbox实现子级的全选与取消全选 4.点击每个tab显示子级的所有课程且添加背景 5.子级未全选父级显示选一半状态 三 .组件设计 ...
  • 根据当时修改页面 对Cascader 选择器进行节点的回显遇到的问题 所以闲暇整理了一个小demo...el-select v-model="nodeId" placeholder="请选择"> <el-option v-for="item in idOptions" :key="item.id" :label=".

空空如也

空空如也

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

vue实现select级联

vue 订阅