Cascader组件的多方面讲解

OADB • 2024-10-24 15:27 • 编程

一、基本概念

Cascader是一种常见的嵌套式选择器组件，用于多层级数据的选择交互。比如省市区三级联动、商品分类选择等场景都可以使用Cascader组件。

Cascader组件可以支持任意层级的数据结构，它的选择器由面板与下拉菜单两部分组成。

二、使用方法

使用Cascader组件需要先引入vue和iview库，然后在代码中通过定义options数据以及绑定value实现。

<template>
  <div>
    <i-cascader :options="options" v-model="selectedCities"></i-cascader>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options: [
          {
            value: '广东省',
            label: '广东省',
            children: [
              {
                value: '深圳市',
                label: '深圳市',
                children: [
                  {
                    value: '南山区',
                    label: '南山区',
                  }
                ]
              }
            ]
          },
          {
            value: '重庆市',
            label: '重庆市',
            children: [
              {
                value: '渝中区',
                label: '渝中区',
              }
            ]
          }
        ],
        selectedCities: []
      }
    }
  }
</script>

三、常用属性

Cascader组件常用的属性有以下几个：

options：配置选项，类型为数组，可以用来设置选择器的选项数据，默认值为[]。

value：当前选中节点的值，类型为数组，可以用v-model绑定实现多级选择，初始值可以为空。

change-on-select：在选择过程中是否立即改变值，类型为Boolean，默认值为false，如果设置为true，则每次选择都会改变value值，否则只在所有选项选择完成后才会改变值。

四、事件

Cascader组件提供了两个事件，分别是change和expand-change。

change：选中节点发生变化时触发，回调参数为选中的节点数组。

expand-change：展开节点时触发，回调参数为被展开的节点的值与节点所有层级的值组成的对象。

<template>
  <div>
    <i-cascader :options="options" v-model="selectedCities" @change="handleNodeChange"></i-cascader>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options: [], // 省略options数据
        selectedCities: [],
      }
    },
    methods: {
      handleNodeChange (value, selectedData) {
        console.log(value)
        console.log(selectedData)
      }
    }
  }
</script>

五、样式定制

Cascader组件可以通过覆盖默认样式实现个性化的定制。其实现方法有两种：

iview提供的全局样式文件覆盖：iview默认样式可以在源码中的src/styles/index.less中找到。选择器由 .ivu-cascader 开始，通过复制样式代码到自己的项目中进行修改即可。

自定义样式覆盖：可以直接在样式文件中对Cascader组件的类名进行覆盖，注意样式作用域问题。

<template>
  <div class="my-cascader">
    <i-cascader :options="options" v-model="selectedCities"></i-cascader>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options: [], // 省略options数据
        selectedCities: [],
      }
    },
  }
</script>

<style scoped>
.my-cascader .ivu-cascader-menu {
  border-radius: 4px;
  padding: 10px;
  background-color: #f6f6f6;
}
.my-cascader .ivu-cascader-menu-item-active,
.my-cascader .ivu-cascader-menu-item-selected {
  color: #fbaf5d;
}
</style>

六、小结

本文介绍了Cascader组件的基本概念、使用方法、常用属性、事件、样式定制等多方面内容，相信通过此文的讲解，读者可以更加深入地了解Cascader组件的实现原理及用法，并在实际项目中运用自如。

原创文章，作者：OADB，如若转载，请注明出处：https://www.506064.com/n/144003.html