精华内容
下载资源
问答
  • 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 是否支持清除 boolean true
    autoFocus 自动获取焦点 boolean false
    changeOnSelect 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 boolean false
    defaultValue 默认的选中项 string[] | number[] []
    disabled 禁用 boolean false
    displayRender 选择后展示的渲染函数,可使用 slot=“displayRender” 和 slot-scope="{labels, selectedOptions}" ({labels, selectedOptions}) => vNode labels => 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 topRight Enum bottomLeft
    popupVisible 控制浮层显隐 boolean -
    showSearch 在选择框中显示搜索框 boolean false
    size 输入框大小,可选 large default small string default
    suffixIcon 自定义的选择框后缀图标 string | VNode | slot -
    value(v-model) 指定选中项 string[] | number[] -

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

    参数 说明 类型 默认值
    filter 接收 inputValue path 两个参数,当 path 符合筛选条件时,应返回 true,反之则返回 false。 function(inputValue, path): boolean
    limit 搜索结果展示数量 boolean 50
    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

    展开全文
  • 1. 温馨提示:Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版 2. 直接步入主题,先看下需求要实现的功能 就是一个级联联动效果,但是他是每一级都能够选择,可以看到既可以选商品组,还能选择商品组下面...

    1. 温馨提示:Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版

    在这里插入图片描述

    2. 直接步入主题,先看下需求要实现的功能

    就是一个级联联动效果,但是他是每一级都能够选择,可以看到既可以选商品组,还能选择商品组下面的团队长,也就是他的子级。
    在这里插入图片描述

    找到饿了吗的级联选择器,快捷访问地址:然后找到选择任意一级选项

    点击跳转:Cascader 级联选择器

    在这里插入图片描述

    3. Cascader 级联选择器 数据渲染

    其实这个很简单,就是通过 :options="options" 映射就OK啦。让每一级都可以选择设置属性 :props="{ checkStrictly: true }"
    在这里插入图片描述

    上面的就是很简单的渲染,这里就不给大家看具体实现代码了,坑还在后面,这是我渲染的结果
    在这里插入图片描述

    4. 本文重点来了。。。

    当我们都写完了的时候,but,特么这官网这个有两个问题:

    1. 点击圆圈后理想是自动收起下拉,但是他这个也没有
    2. 而且只能点击圆圈才能选中,点击文字 label 没有效果

    于是,开始了艰辛的百度历程: 最后依然没有找到答案,好像很少人用这种,级联每一级都可以选择的。。。用得多的就是选中最后一级,像省级联动之内的

    打铁还需自身硬,只有自己去慢慢看了。后面终于解决了这两个问题:
    先看第一个问题,让他收起来,这个好像不难,确实不难:
    设置每次监听值变化的时候,把 dropDownVisible 属性设置为 false 即可。(虽说简单,但是这个属性我找了半天,官网根本没有说~~~~(>_<)~~~~ )

      watch: {
        handlerValue() {
          if (this.$refs.refHandle) {
            this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
          }
        }
      },
    

    在看看第二个问题,点击label 也每次让他选中,卧槽,无从下手,后面怎么解决的说来话长,看实现代码吧。

    mounted() {
    	//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡,暂时想不到好方法来触发。
    	//这种比较耗性能,暂时想不到其他的,能实现效果了。
        setInterval(function() {
          document.querySelectorAll(".el-cascader-node__label").forEach(el => {
            el.onclick = function() {
              if (this.previousElementSibling) this.previousElementSibling.click();
            };
          });
        }, 1000);
      },
    

    5. 补充其它问题

    后端返回的字段和前端的不一致,请使用 propsvalue,label,children 做映射

    vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题

    展开全文
  • elementui中cascader

    2021-04-21 17:20:15
    el-cascader ref="cascader" v-model="path" :options="dataPathOptions" placeholder="请选择数据路径" :props="props" /> </template> <script lang="ts"> import Vue from 'vue'; import {...

    第一种:从后台获取数据

    <template>
      <el-cascader
        ref="cascader"
        v-model="path"
        :options="dataPathOptions"
        placeholder="请选择数据路径"
        :props="props"
      />
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    import { Component, Prop, Watch } from 'vue-property-decorator';
    import FormBase from '@/components/form/FormBase';
    import Fetch from '@/utils/fetch';
    import { get } from 'lodash';
    import { randomString } from '@/utils/random';
    
    @Component
    export default class SourceDataPath extends FormBase<string> {
      @Prop(Array)
      private dataPathOptions!: [];
    
      private dataOptions = []
      private get path (): string[] {
        if (!this.value) {
          return [];
        }
        return this.value.split('/');
      }
    
      private set path (val) {
        const value = val.join('/');
        this.$emit('update:value', value);
        this.$emit('input', value);
      }
    
      private selectPath: string[] = [];
      private props = {
        lazy: true,
        value: 'value',
        label: 'label',
        lazyLoad: (node: any, resolve: any) => {
          const { level, pathNodes } = node;
          this.selectPath = [];
          if (level === 0) {
            resolve([]);
            return;
          }
          if (level === 1) {
            this.dataOptions = this.dataPathOptions;
          }
          pathNodes.forEach((item: object, index: number) => {
            const value = pathNodes[index] ? pathNodes[index].value : '';
            this.selectPath.push(value);
          });
          Fetch.get(`lujing?base_path=${this.selectPath.join('/')}`, {}, false).then(response => {
            const nodes = response.contains.map((item: any) => ({
              label: item.name,
              value: item.name,
              leaf: item.last ? node.level : node.level >= 10
            }));
            resolve(Array.from(new Set(nodes)));
          });
        }
      };
    
      private async init () {
        // if (!this.path.length) {
        //   return;
        // }
        // const getChild = (level: number): any => {
        //   if (level > this.path.length - 1) {
        //     return;
        //   }
        //   return [{
        //     label: this.path[level],
        //     value: this.path[level],
        //     children: level === this.path.length - 1 ? null : getChild(level + 1)
        //   }];
        // };
        // const index = this.dataPathOptions.findIndex((item: any) => item.value === this.path[0]);
        // const options = JSON.parse(JSON.stringify(this.dataPathOptions));
        // if (index < 0 || !options.length) {
        //   return;
        // }
        // options[index].children = getChild(1);
        // this.dataOptions = options;
        await this.$nextTick();
        const cascader = this.$refs.cascader as any;
        if (cascader && this.value) {
          cascader.presentText = this.value;
          cascader.checkedValue = this.path;
          cascader.inputValue = this.value;
        }
      }
    
      @Watch('path', { immediate: true })
      private onPathChange () {
        this.init();
      }
    }
    </script>
    
    <style scoped>
    </style>
    
    

    第二种:后台给了全部,前端自己封装

    <template>
      <div class="cascaderOptions">
        <el-cascader
          ref="cascader"
          v-model="bindValue"
          :options="trainDateOptions"
          placeholder="请选择列车编组"
          :props="props"
          filterable
        />
      </div>
    </template>
    
    <script lang="ts">
    import Vue from 'vue';
    import { Component, Prop, Watch } from 'vue-property-decorator';
    import FormBase from '@/components/form/FormBase';
    import Fetch from '@/utils/fetch';
    import { CascaderOptions, TrainOptions, GroupOptions, CheckingOptions, Dict } from '@/model/search';
    import { dateTime } from '@/utils/formatTime';
    
    export function getCheckingIdList (checkingIdList: string[]) {
      // eslint-disable-next-line spellcheck/spell-checker
      if (!checkingIdList) {
        return;
      }
      // eslint-disable-next-line spellcheck/spell-checker
      return checkingIdList.map((item: string) => {
        return item[item.length - 1];/因为后台只需要最后一个字段
      });
    }
    
    @Component
    export default class TrainsDateSelect extends FormBase<string[]> {
      // @Prop(Array)
      private trainDateOptions: CascaderOptions[]=[];
      @Prop(Object)
      private query !: {}
    
      private props = { multiple: true };
    
      private async getTrainsSelectData () {
        // eslint-disable-next-line spellcheck/spell-checker
        const resp = await Fetch.get('/api/checkings/query', { params: { ...this.query } });
        const selectMap: TrainOptions[] = resp.trains;
        if (selectMap) {
          const checkingToOptions = (checkingList: CheckingOptions[]) => checkingList.map((checking: CheckingOptions) => {
            return {
              value: checking.id,
              label: dateTime(checking.created_at) + checking.comment
            };
          });
          const groupByDateOption = (groups: GroupOptions[]) => groups.map((group: GroupOptions) => {
            return {
              value: group.date,
              label: group.date,
              // eslint-disable-next-line spellcheck/spell-checker
              children: checkingToOptions(group.checkings)
            };
          });
    
          (this.trainDateOptions as any) = selectMap.map((item: TrainOptions) => {
            return {
              value: item.serial,
              label: item.serial,
              children: groupByDateOption(item.group_by_date)
            };
          });
        }
      }
    
      @Watch('bindValue')
      private onValueChange () {
        if (!this.bindValue.length) {
          (this.$refs.cascader as any).$refs.panel.activePath = [];
        }
      }
    
      @Watch('query')
      private async queryChange () {
        await this.getTrainsSelectData();
      }
    }
    </script>
    
    <style lang="scss" scoped>
    @import '~@/css/variable';
    .cascaderOptions {
      ::v-deep .el-input {
        width: 410px;
      }
      ::v-deep .el-cascader__tags{
        flex-wrap: nowrap;
        overflow: hidden;
        .el-tag .el-icon-close{
          right: 0px;
          top: 0px;
        }
        .el-cascader__search-input{
          background-color: $color-bgc-theme;
        }
      }
      ::v-deep .el-tag.el-tag--info{
        background-color: $color-bgc-theme;
        width: auto;
        color: $color-occasionally;
      }
    
    }
    </style>
    
    
    展开全文
  • Multi-Cascader 概述 由于elementUI 的级联选择器暂不支持多选,因此基于elementUI开发此组件,所有的样式class都是使用 elementUI 原样式,基本可无副作用的引入项目使用,有任何问题欢迎发布 issue,我会在看到...
  • Cascader坑一

    2021-02-04 16:33:51
    当数据过多时,数据显示不全 解决方案: 全局样式里加 .el-cascader-menu { height: 300px; }

    当数据过多时,数据显示不全
    解决方案: 全局样式里加

    .el-cascader-menu {
      height: 300px;
    }
    
    
    展开全文
  • 有个需求,是vue 框架选择...2.如何回显用的方法就是,在el-cascader 下面放一个input,然后动态控制cascader的透明度// input//cascader// htmlclass="my-cascader":style="{opacity: regionPlaceholder ? '0' : '1...
  • iview的cascader 多级联动虽然可以实现多级联动,但是不支持多选,这里 cascader-multi 可以支持多选功能 实现效果(真实效果和他有出入,这是网上找的好看的动图): 实现步骤: 1、安装 npm i cascader-...
  • antd Cascader处理

    2020-11-16 17:41:32
    * 删除Cascader级联最后一级空数据 * @param {*} data */ export function initTree(data) { for (let i = 0; i < data?.length; i++) { if (data[i].children && data[i].children.length < 1) ...
  • antd-cascader

    千次阅读 2018-10-12 20:28:18
    nz-cascader style="width: 300px;" [nzOptions]="nzOptions" [(ngModel)]="values" (ngModelChange)="onChanges($event)" &gt; &lt;/nz-cascader&gt; ...
  • cascader级联选择器

    2020-08-06 17:30:29
    cascader级联选择器的高度问题 在你的全局css下添加以下代码即可解决问题 .el-cascader-menu { height: 300px; } /* or */ .el-cascader-panel { height: 300px !important; } 以为是请求的接口写错找了半天- _ ...
  • cascader表单验证问题

    2020-11-11 12:00:36
    element UI cascader 表单验证 失败 cascader选中后,验证仍然失败 直接贴代码 <el-cascader ref=“dangZB” @focus=“fo” :options=“this.$store.state.data” :props=“cascaderProps” clearable @change=...
  • 前言Ant Design Vue中的cascader是专门处理级联数据的组件,使用非常简单。但在动态获取数据并回显数据方面,略有不足,无法实现回显数据前加载二级数据。需要自己编写代码来实现。如何使用组件引入组件默认框架没有...
  • Vue Element Cascader使用

    2020-07-06 10:11:18
    主要用于实现java代码于Cascader的结合 层级列表构造代码 public class Cascader { @JsonSerialize(using = ToStringSerializer.class) private Long value; private String label; private List<Cascader&...
  • element cascader选择器

    2021-02-06 16:28:38
    element cascader选择器 关于项目遇到 级联选择器选择任意一项和关闭弹框 组件中的内容 <el-cascader :options="category_list" :show-all-levels="false" :props="category_props
  • 想要的效果:v-model动态变化,刷新cascader 的显示 this.$forceUpdate() //作用:强制刷新 这个是v-model 的变量的值变了,但页面没改变 点击删除按钮,但UI组件没有跟着变化 <el-cascader-panel v-if=...
  • Cascader 级联选择(详解)

    万次阅读 2018-05-24 16:33:03
    Cascader :data=&amp;amp;amp;amp;amp;quot;dataObject&amp;amp;amp;amp;amp;quot; v-model=&amp;amp;amp;amp;amp;quot;valueArray&amp;amp;amp;amp;amp;quot; :load-data=&amp;amp;amp;amp;amp...
  • Cascader 级联选择器 多选 <el-cascader class="cascader" :options="options" :disabled="is_edit" v-model="cascaderActive" @change='cascaderData'
  • el-cascader 使用

    2020-06-21 18:56:52
    el-cascader v-model="mtclassList" :options="materielCategoryVOs" placeholder="请选择" change-on-select clearable :show-all-levels="false"> </el-cascader> // 如果后端返回的是 用","分隔...
  • element-ui级联选择器(Cascader)获取级联对象 :主要是想获取:label值、value值 效果图预览: 代码参考如下: <el-cascader ref="cascaderAddr" :options="addressOptions" change-on-select v-model="form...
  • 主要介绍了Element Cascader 级联选择器的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • element UI Cascader 动态加载 lazyload页面 回显: 使用 :placeholder属性(完美避过 嘻嘻) 数据: 一级省要给初始默认值: options 懒加载: lazy: true, leaf 为true 结束 节点, element 提供的 props 中的属性和方法...
  • el-cascader验证问题

    2021-04-28 09:17:33
    Vue Element-ui el-cascader FORM表单校验失败 问题描述 表单中 el-cascader 级联选择器, 使用 async-validator 进行校验时明明已经选择了值, 但还是选择失败。 选择值并不能校验通过 解决方案 检查校验对象的...
  • <div><p> 你好,请问Cascader级联选择组件,会出现要点击两次才出现二级的情况,是为什么呢</p><p>该提问来源于开源项目:wux-weapp/wux-weapp</p></div>
  • 遇到的问题:在编辑表单的...v-model="val":props="props"ref="cascader">val: {{val}}let val = 0function generateData(node, resolve) {const { level } = node;setTimeout(() => {let id = 0;const nodes...
  • element ui cascader 动态加载回显问题解决方法

    万次阅读 热门讨论 2020-05-09 00:06:38
    我用的element ui cascader 这段三联动是懒加载的 props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候,cascader却不显示了。只要重新加载下cascader组件就行。 解决...
  • <div><p>希望增加 Cascader 组件 </p><p>该提问来源于开源项目:heyui/heyui</p></div>
  • el-cascader v-model="filters.category_id" :clearable='true' :props="categoriesProp" :placeholder="filters.full_path" @change="onCategory" style="width: 300px"></el-cascader> categories: [],...
  • cascader组件设置一个ref // 清空级联选择器选中状态 this.$refs.cascader.$refs.panel.clearCheckedNodes() // 清除高亮 this.$refs.cascader.$refs.panel.activePath = [] 还有一种 let obj = {} obj....

空空如也

空空如也

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

cascader