精华内容
下载资源
问答
  • layui_cascader 基于LayUI的级联选择器Cascader 效果图 单选 多选(选项无折叠) 多选(选项折叠) 配置参数文档(*表示必填) *elem:HTMLElement对象,例如:$('input[name=example]')[0] *options:Array 数据 ...
  • uniapp-cascader

    2020-11-14 09:51:48
    基于uniapp 开发的级联选择器,支持h5和小程序,支持配置选择样式、支持配置两级和三级,支持配置单选和多选
  • Multi-Cascader 概述 由于elementUI 的级联选择器暂不支持多选,因此基于elementUI开发此组件,所有的样式class都是使用 elementUI 原样式,基本可无副作用的引入项目使用,有任何问题欢迎发布 issue,我会在看到第...
  • elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller' @vueblocks/elp-cascader 基于element-ui和vue-virtual-scroller的级联选择器,用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
  • 主要介绍了Element Cascader 级联选择器的使用示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 使用Cascader级联选择器过程中主要存在的应用问题如下: 1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据; 2、提前加载数据后,点击相应父级...
  • 卡斯卡德 vue2.x级联组件 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production...
  • 今天找到了大半天,没找到合适的 vue el-cascader 省市区街道4级联动的数据,并且支持维护修改的。 于是自己做了一个。 代码非常简单,重要的符合这个格式的数据,这就是我这个懂后端程序员的优势了。
  • element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址(引用)传递,动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
  • 如下图这样把操作按钮放在 select 弹层底部是一种挺常见的设计方式 但是很遗憾 element-ui 没有给我们提供这个插槽,我们想实现这个功能只能重写组件或者等官方更新吗,答案当然是否定的!...li class=el-cascader-nod
  • 使用于iview 中 Cascader 级联选择的 省、市、县数据 ,在项目中亲自测试过没有任何问题,使用如果有问题请联系
  • 主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • rmc-cascader React Mobile Cascader组件(Web和react-native) 屏幕截图 网路 本国的 发展 npm i npm start 例子 http:// localhost:8000 / examples / 在线示例: ...
  • 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在控制台中看到任何棉绒错误。...
  • rc-cascader React Cascader Component Browser Support IE 8+ :check_mark: Chrome 31.0+ :check_mark: Firefox 31.0+ :check_mark: Opera 30.0+ :check_mark: Safari 7.0+ :check_mark: Screenshots Example ...
  • 关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
  • npm install --save react-native-picker-cascader 如何使用 import PickerCascader from 'react-native-picker-cascader'; <PickerCascader style={{ padding: 10 }} data={[ { key: '1', text: 'Australia', ...
  • country-data 基于elementUI的Cascader 级联选择器的城市数据 用法: 参考链接:
  • 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

    展开全文
  • Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
  • 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>
    
    
    展开全文
  • 由于项目中使用的不是vue的框架,但是又需要用到cascader组件,可惜找了很久都没有找到想要的效果,只好自己写组件了。为了力求和element-ui的级联效果一致,来自后端开发的我亲自操刀,哈哈哈!! 使用示例 引入 &...

    前言

    由于项目中使用的不是vue的框架,但是又需要用到cascader组件,可惜找了很久都没有找到想要的效果,只好自己写组件了。为了力求和element-ui的级联效果一致,来自后端开发的我亲自操刀,哈哈哈!!

    使用示例

    引入

    <html>
    	<head>
    		<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    		<link rel="stylesheet" type="text/css" href="./cascader/cascader.css"/>
    		<script src="https://www.layuicdn.com/layui/layui.js"></script>
    		<script src="./cascader/cascader.js"></script>
    	</head>
    	<body>
    	<input id="demo"/>
    	/* 如果使用script的方式没办法加载cascader.js文件,则使用
    	layui.extend({
    	    layCascader: '/cascader/cascader'
    	}).use(['layCascader'], function () {
    	    ...
    	}这种方式加载
    	*/
    	layui.use('layCascader', function () {
    	    var layCascader = layui.layCascader;
    	    layCascader({
    	      elem: '#demo',
    	      options: options
    	    });
    	});
    	</body>
    </html>
    

    基本用法

    在这里插入图片描述

    禁用选项

    在这里插入图片描述

    多选、折叠

    在这里插入图片描述

    选择任意一级

    在这里插入图片描述

    可搜索

    在这里插入图片描述

    动态加载

    在这里插入图片描述

    API

    Attributes

    参数说明类型可选值默认值
    elem绑定元素String/jqueryObject/DOM--
    value预设值Object/Array-null
    options可选项数据源,键名可通过 props 属性配置Array-[]
    empty无匹配选项时的内容String-‘暂无数据’
    placeholder输入框占位文本String-‘请选择’
    disabled是否禁用Booleantrue / falsefalse
    clearable是否支持清空选项Booleantrue / falsefalse
    showAllLevels输入框中是否显示选中值的完整路径Booleantrue / falsetrue
    collapseTags多选模式下是否折叠TagBooleantrue / falsefalse
    minCollapseTagsNumber最小折叠标签数Number-1
    separator选项分隔符String-’ / ’
    filterable是否可搜索选项Booleantrue / falsefalse
    filterMethod自定义搜索逻辑,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中Function--
    debounce搜索关键词输入的去抖延迟,毫秒Number-300
    beforeFilter筛选之前的钩子,参数为输入的值,若返回 false,则停止筛选Function--
    popperClass自定义浮层类名String-‘’
    extendClass继承class样式Booleantrue / falsefalse
    extendStyle继承style样式Booleantrue / falsefalse

    Props

    参数说明类型可选值默认值
    expandTrigger次级菜单的展开方式Stringclick / hover‘click’
    multiple是否多选Booleantrue / falsefalse
    checkStrictly是否严格的遵守父子节点不互相关联Booleantrue / falsefalse
    lazy是否动态加载子节点,需与 lazyLoad 方法结合使用Booleantrue / falsefalse
    lazyLoad加载动态数据的方法,仅在 lazy 为 true 时有效Function(node, resolve),node为当前点击的节点,resolve为数据加载完成的回调(必须调用)--
    value指定选项的值为选项对象的某个属性值String-‘value’
    label指定选项标签为选项对象的某个属性值String-‘label’
    children指定选项的子选项为选项对象的某个属性值String-‘children’
    disabled指定选项的禁用为选项对象的某个属性值String-‘disabled’
    leaf指定选项的叶子节点的标志位为选项对象的某个属性值String-‘leaf’

    Event

    方法名说明参数
    setOptions设置当前选项Array
    setValue覆盖当前值.单选时传对象,多选时传数组单选:Object/String/Number 多选:Array
    change当节点变更时,执行回调 多选时,参数是一个数组单选:function(value,Node){} 多选:function(values,Nodes){}
    disabled禁用组件Boolean
    blur收起面板-
    focus展开面板-
    getCheckedNodes获取选中的节点,如需获取路径,使用node.path获取,将获取各级节点的node对象-
    getCheckedValues获取选中的值-
    clearCheckedNodes清空选中的节点-

    链接

    演示地址
    gitee地址
    github地址

    展开全文
  • Cascader级联数据: 省市二级联动数据: 用法参考: 网页展示: 当然你也可以直接下载 https://github.com/heerey525/antdCascaderDate.git 然后安装依赖 npm install 运行 npm start 最近发现很多人star这个项目...
  • 可搜索 <el-cascader v-model="value" :options="defaultOptions" filterable>el-cascader> 效果如下: 3.4 选中项只显示最后一级 当级别较多时,显示全部的级别会显得很杂乱,我们可以设置:show-all-levels="false...

    点此查看全部文字教程、视频教程、源代码

    1. 概述

    级联选择器用途比较广泛,例如选择人员所属的单位,可以从总公司-分公司-部门-子部门这样级联选择下来。

    如果自己去实现一个级联选择器,实际上是难度较大的,Element提供了一个功能相当完善的级联选择器,本篇文章就进行一个详细的介绍。

    2. 数据绑定

    2.1 默认数据绑定

    级联选择器默认会绑定一个数组,节点的显示文本和值分别对应labelvalue属性,节点的后代对应children属性。示例代码如下:

     默认数据绑定,选中值{{value}}
        <el-cascader v-model="value" :options="defaultOptions"></el-cascader>
    
    export default {
      data() {
        return {
          value: [],
          defaultOptions: [{
            value: '1',
            label: '山东',
            children: [{
              value: '2',
              label: '济南',
            },
            {
              value: '3',
              label: '泰安',
            }],
          }],
        }
      }
    }
    

    对应效果如下,注意绑定的值是一个数组,记录了选择路径每个节点的值
    在这里插入图片描述

    2.2 指定绑定数据格式

    如果后端接口已开发完毕,后端返回的数据格式是固定的,也可以通过props参数指定绑定数据的格式,代码如下,将节点文本、节点值绑定的属性改为了idname

      指定绑定属性
        <el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'son' }"></el-cascader>
    
      myOptions: [{
            id: '1',
            name: '山东',
            son: [{
              id: '2',
              name: '济南',
            },
            {
              id: '3',
              name: '泰安',
            }],
          }],
    

    3. 常用功能

    3.1 修改触发方式

    默认情况下,需要点击上一级的选项,才能展开下一级。通过修改expandTrigger参数可以实现悬停展开效果。

     修改触发方式,默认为click点击触发,可以修改为hover悬停触发
        <el-cascader v-model="value" :options="defaultOptions" :props="{ expandTrigger: 'hover' }"></el-cascader>
    

    3.2 增加清空按钮

    通过设置clearable,增加一个清空按钮,点击该按钮可清空选中项。

     增加清空按钮
        <el-cascader v-model="value" :options="defaultOptions" clearable></el-cascader>
    

    效果如下:
    在这里插入图片描述

    3.3 可搜索

    通过为el-cascader设置filterable属性,即可轻松启用搜索功能。

    可搜索
        <el-cascader v-model="value" :options="defaultOptions" filterable></el-cascader>
    

    效果如下:
    在这里插入图片描述

    3.4 选中项只显示最后一级

    当级别较多时,显示全部的级别会显得很杂乱,我们可以设置:show-all-levels="false"来控制el-cascader只显示最后一级别。

        只显示最后1级
        <el-cascader v-model="value" :options="defaultOptions" :show-all-levels="false"></el-cascader>
    

    效果如下:
    在这里插入图片描述

    3.5 可选中任意一级

    有时候,我们想选中不是最后一级的节点,可以通过checkStrictly参数来实现。

    可选中任意1级
        <el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true' }"></el-cascader>
    

    效果如下:
    在这里插入图片描述

    3.6 面板样式

    默认为下拉框的样式,也可以完整显示为一个面板,使用l-cascader-panel标签即可。

        面板样式:
        <el-cascader-panel v-model="value" :options="defaultOptions"></el-cascader-panel>
    

    效果如下:
    在这里插入图片描述

    3.7 自定义节点内容

    可以通过插槽自定义节点的内容,为节点添加图标、修改字体、修改颜色。

     自定义节点内容
        <el-cascader v-model="value" :options="defaultOptions">
          <template slot-scope="{ data }">
            <span style="color:red;">{{ data.label }}</span>
          </template>
        </el-cascader>
    

    template中间的部分可以任意自定义,上面代码运行效果:
    在这里插入图片描述

    4. 动态加载下级

    有时候节点数量很多,一次性加载速度会很慢,此时可以选择动态的加载下一级别。

     动态加载下级
        <el-cascader :props="myProps"></el-cascader>
    
          myProps: {
            lazy: true,
            lazyLoad(node, resolve) {
              console.log(node);
              // 通过调用resolve将子节点数据返回,通知组件数据加载完成
              let nodes = [];
              if (node.level == 0) {
                nodes.push({
                  label: '山东',
                  value: 1
                });
              } else if (node.level == 1) {
                nodes.push({
                  label: '济南',
                  value: 2
                });
              }
              resolve(nodes);
            }
          }
    

    解释下上面的代码,通过lazy:true启用动态加载,每次点击父节点会出发lazyLoad方法,并将节点数据node传递进来。
    我们根据node.level判断当前是第几个级别,如果是第0级则返回包含山东的数组,如果是第1级则返回包含济南的数组。
    最后的resolve函数是关键,会将数组的元素解析为当前父节点的子节点。

    注意在实际项目开发中,我们可以根据node.data来获取节点绑定的数据信息,从而向后端查询当前节点的子节点数组。

    5. 小结

    el-cascader提供了灵活的功能,快捷的实现方式,在级联选择时非常好用。

    相比于使用多个下拉框的方式,级联选择器节省了屏幕空间,且可以支持任意多个级别,无疑是更好的选择。

    展开全文
  • el-cascader  v-model="listType"  :options="listTypeArr"  :props="dialogProps"  clearable  size="mini"  style="width: 220px"  ...
  • 背景 先说下背景,因为要把国家的代码,区号和中英文名字都要动态的存放。 产品经理出了个需求,说是要手动填写对应的地区,国家编码这些信息。...用cascader的主要目的是因为国家太多了,根据国家的首...
  • :show-all-levels="false" ref="cascader" popper-class="sc-cascader-popper cascader-popper" /> </template> <script> export default { props: { value: { type: Array, default: () => [] }, selectedName: { ...

空空如也

空空如也

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

cascader