Minimalist UI

Cascader 级联选择器

引入组件

<template>
  <div>
    <m-cascader :source="sourceData"></m-cascader>
  </div>
</template>

<script>
  import { MCascader } from "@csr/m_ui";
  export default {
    components: {
      MCascader
    },
    sourceData: [
      {
        label: "火影",
        value: "huoying",
        children: [
          {
            label: "三忍",
            value: "sanren",
            children: [
              { label: "自来也", value: "zilaiye" },
              { label: "大蛇丸", value: "dashewan" },
              { label: "纲手", value: "gangshou" }
            ]
          },
          {
            label: "晓",
            value: "xiao",
            children: [
              { label: "佩恩", value: "peien" },
              { label: "小南", value: "xiaonan" },
              { label: "迪达拉", value: "didala" },
              { label: "蝎", value: "xie" },
              { label: "角都", value: "jiaodu" },
              { label: "飞段", value: "feiduan" },
              { label: "鼬", value: "you" },
              { label: "干柿鬼鲛", value: "ganshiguijiao" },
              { label: "绝", value: "jue" },
              { label: "阿飞", value: "afei" },
              { label: "枇杷十藏", value: "pipashizang" },
            ]
          }
        ]
      },
      {
        label: "银魂",
        value: "yinhun",
        children: [
          {
            label: "万事屋",
            value: "wanshiwu",
            children: [
              { label: "坂田银时", value: "bantianyinshi" },
              { label: "神乐", value: "shenle" },
              { label: "志村新八", value: "zhicunxinba" },
            ]
          }
        ]
      },
      {
        label: "春物",
        value: "chunwu",
        children: [
          {
            label: "侍奉部",
            value: "shifengbu",
            children: [
              { label: "比企谷八幡", value: "biqigubafan" },
              { label: "由比滨结衣", value: "youbibinjieyi" },
              { label: "雪之下雪乃", value: "xuezhixiaxuenai" },
            ]
          }
        ]
      }
    ],
  }
</script>

基础用法

代码
<m-cascader :source="sourceData"></m-cascader>

<script>
  export default {
    data() {
      return {
        sourceData: [
          {
            label: "火影",
            value: "huoying",
            children: [
              {
                label: "三忍",
                value: "sanren",
                children: [
                  { label: "自来也", value: "zilaiye" },
                  { label: "大蛇丸", value: "dashewan" },
                  { label: "纲手", value: "gangshou" }
                ]
              },
              {
                label: "晓",
                value: "xiao",
                children: [
                  { label: "佩恩", value: "peien" },
                  { label: "小南", value: "xiaonan" },
                  { label: "迪达拉", value: "didala" },
                  { label: "蝎", value: "xie" },
                  { label: "角都", value: "jiaodu" },
                  { label: "飞段", value: "feiduan" },
                  { label: "鼬", value: "you" },
                  { label: "干柿鬼鲛", value: "ganshiguijiao" },
                  { label: "绝", value: "jue" },
                  { label: "阿飞", value: "afei" },
                  { label: "枇杷十藏", value: "pipashizang" }
                ]
              }
            ]
          },
          {
            label: "银魂",
            value: "yinhun",
            children: [
              {
                label: "万事屋",
                value: "wanshiwu",
                children: [
                  { label: "坂田银时", value: "bantianyinshi" },
                  { label: "神乐", value: "shenle" },
                  { label: "志村新八", value: "zhicunxinba" }
                ]
              }
            ]
          },
          {
            label: "春物",
            value: "chunwu",
            children: [
              {
                label: "侍奉部",
                value: "shifengbu",
                children: [
                  { label: "比企谷八幡", value: "biqigubafan" },
                  { label: "由比滨结衣", value: "youbibinjieyi" },
                  { label: "雪之下雪乃", value: "xuezhixiaxuenai" }
                ]
              }
            ]
          }
        ],
      }
    }
  }
</script>

禁用选项

代码
<m-cascader :source="sourceData"></m-cascader>

<script>
  export default {
    data() {
      return {
        sourceData: [
          {
            label: "火影",
            value: "huoying",
            children: [
              {
                label: "三忍",
                value: "sanren",
                children: [
                  { label: "自来也", value: "zilaiye", disable: true },
                  { label: "大蛇丸", value: "dashewan" },
                  { label: "纲手", value: "gangshou" }
                ]
              },
              {
                label: "晓",
                value: "xiao",
                children: [
                  { label: "佩恩", value: "peien" },
                  { label: "小南", value: "xiaonan" },
                  { label: "迪达拉", value: "didala" },
                  { label: "蝎", value: "xie" },
                  { label: "角都", value: "jiaodu" },
                  { label: "飞段", value: "feiduan" },
                  { label: "鼬", value: "you" },
                  { label: "干柿鬼鲛", value: "ganshiguijiao" },
                  { label: "绝", value: "jue" },
                  { label: "阿飞", value: "afei" },
                  { label: "枇杷十藏", value: "pipashizang" }
                ]
              }
            ]
          },
          {
            label: "银魂",
            value: "yinhun",
            disable: true,
            children: [
              {
                label: "万事屋",
                value: "wanshiwu",
                children: [
                  { label: "坂田银时", value: "bantianyinshi" },
                  { label: "神乐", value: "shenle" },
                  { label: "志村新八", value: "zhicunxinba" }
                ]
              }
            ]
          },
          {
            label: "春物",
            value: "chunwu",
            children: [
              {
                label: "侍奉部",
                value: "shifengbu",
                children: [
                  { label: "比企谷八幡", value: "biqigubafan" },
                  { label: "由比滨结衣", value: "youbibinjieyi" },
                  { label: "雪之下雪乃", value: "xuezhixiaxuenai" }
                ]
              }
            ]
          }
        ],
      }
    }
  }
</script>

默认选中

代码
<m-cascader :source="sourceData" v-model="selected"></m-cascader>

<script>
  export default {
    data() {
      return {
        sourceData: [
          {
            label: "火影",
            value: "huoying",
            children: [
              {
                label: "三忍",
                value: "sanren",
                children: [
                  { label: "自来也", value: "zilaiye" },
                  { label: "大蛇丸", value: "dashewan" },
                  { label: "纲手", value: "gangshou" }
                ]
              },
              {
                label: "晓",
                value: "xiao",
                children: [
                  { label: "佩恩", value: "peien" },
                  { label: "小南", value: "xiaonan" },
                  { label: "迪达拉", value: "didala" },
                  { label: "蝎", value: "xie" },
                  { label: "角都", value: "jiaodu" },
                  { label: "飞段", value: "feiduan" },
                  { label: "鼬", value: "you" },
                  { label: "干柿鬼鲛", value: "ganshiguijiao" },
                  { label: "绝", value: "jue" },
                  { label: "阿飞", value: "afei" },
                  { label: "枇杷十藏", value: "pipashizang" }
                ]
              }
            ]
          },
          {
            label: "银魂",
            value: "yinhun",
            children: [
              {
                label: "万事屋",
                value: "wanshiwu",
                children: [
                  { label: "坂田银时", value: "bantianyinshi" },
                  { label: "神乐", value: "shenle" },
                  { label: "志村新八", value: "zhicunxinba" }
                ]
              }
            ]
          },
          {
            label: "春物",
            value: "chunwu",
            children: [
              {
                label: "侍奉部",
                value: "shifengbu",
                children: [
                  { label: "比企谷八幡", value: "biqigubafan" },
                  { label: "由比滨结衣", value: "youbibinjieyi" },
                  { label: "雪之下雪乃", value: "xuezhixiaxuenai" }
                ]
              }
            ]
          }
        ],
      }
    }
  }
</script>

动态加载次级选项

代码
<m-cascader :source.sync="sourceData" v-model="selected" :loadData="loadMore"></m-cascader>

<script>
  export default {
    data() {
      return {
        sourceData: [
          {
            label: "火影",
            value: "huoying",
            children: [
              {
                label: "三忍",
                value: "sanren",
                children: [
                  { label: "自来也", value: "zilaiye", children: []},
                  { label: "大蛇丸", value: "dashewan" },
                  { label: "纲手", value: "gangshou" }
                ]
              },
              {
                label: "晓",
                value: "xiao",
                children: [
                  { label: "佩恩", value: "peien" },
                  { label: "小南", value: "xiaonan" },
                  { label: "迪达拉", value: "didala" },
                  { label: "蝎", value: "xie" },
                  { label: "角都", value: "jiaodu" },
                  { label: "飞段", value: "feiduan" },
                  { label: "鼬", value: "you" },
                  { label: "干柿鬼鲛", value: "ganshiguijiao" },
                  { label: "绝", value: "jue" },
                  { label: "阿飞", value: "afei" },
                  { label: "枇杷十藏", value: "pipashizang" }
                ]
              }
            ]
          },
          {
            label: "银魂",
            value: "yinhun",
            children: [
              {
                label: "万事屋",
                value: "wanshiwu",
                children: [
                  { label: "坂田银时", value: "bantianyinshi" },
                  { label: "神乐", value: "shenle" },
                  { label: "志村新八", value: "zhicunxinba" }
                ]
              }
            ]
          },
          {
            label: "春物",
            value: "chunwu",
            children: [
              {
                label: "侍奉部",
                value: "shifengbu",
                children: [
                  { label: "比企谷八幡", value: "biqigubafan" },
                  { label: "由比滨结衣", value: "youbibinjieyi" },
                  { label: "雪之下雪乃", value: "xuezhixiaxuenai" }
                ]
              }
            ]
          }
        ],
      }
    },
    methods: {
      loadMore(sourceItem, onUpdateSource) {
        if(sourceItem.value === 'zilaiye') {
          let data = [
            { label: "少年佩恩", value: "shaonianpeien" },
            { label: "鸣人", value: "mingren" },
            { label: "波风水门", value: "bofengshuimen" }
          ]
          setTimeout(() => {
            onUpdateSource(data)
          }, 3000)
        }
      }
    }
  }
</script>

API

属性说明类型默认值
v-model 默认选中的选项，选中选项发生改变，改值会同步更新 array
source 级联选择器选项数据，如果需要动态加载次级选项，需要加上.sync修饰符， 或监听update:source事件手动更新。详情参考sourceItem表 array
loadData 用于动态加载次级选项的函数，该函数接受两个参数：

selectedItem: 当前选中的选项，类型：object

callback: 将新数据传入该回调函数用于更新source

 array

sourceItem

属性说明类型默认值
value 选项的值 string
label 选项的展示的文本 string
children 选项的子选项，该值是一个数组，数组中的每一项的格式和sourceItem相同， 如果选项需要动态的加载子选项，那么该属性必须存在，值为空数组 array
disable 是否禁用选项 array

事件

事件名 说明 回调参数
select 点击选项时触发 当前点击的选项的value，返回类型为：array
change 点击选项时触发 当前点击的选项，返回类型为：object
selected-items 点击选项时触发 各父级选项组成的数组：array

← Swiper 轮播 →