vue-cascader-zcy

a vue component of cascade selecto for pc

pc端级联选择器（>=vue2.0）

使用方法

npm安装

npm install vue-cascader-zcy

import VueCascader from 'vue-cascader-zcy'
Vue.use(VueCascader);

Quickstart

<template>
    <div class="select-item">
        <input class="sct-ipt" @click="showCascader" v-model="sct_demo" readonly>
        <sny-cascader
            ref="cascader"
            v-model="adrList"
            label-name="name"
            value-name="id"
            other-value-name="cost"
            child-name="childList"
        :options="adrOptions"
        @change="sctDone">
    </sny-cascader>
</div>
</template>

<script>
    export default {
    data() {
    return {
    sct_demo: "",
    options: "json对象",
};
},
    components: {
    VueCascader
},
    methods: {
    showCascader() {
    this.$refs.cascader.showSctList();
},
    sctDone(obj) {
    const { value, label, otherValue } = obj;
}
}
};

</script>

属性

| 名称 | 类型 | 默认值 | 是否必填 | 说明 | |------------------|----------|-----|-------|-----------| | options | Object | - | true | 级联选择数据对象 | | labelName | String | - | false | 文字字段名称 | | valueName | String | - | false | value字段名称 | | childName | String | - | false | 子节点字段名称 | | otherValueName | String | - | false | 需要其他值的属性名 |

方法

| 名称 | 说明 | 默认值 | |--------|----------------------------------------------|-----| | show | 通过this.$refs.cascader.showSctList()显示级联选择器 | | | change | 通过@change监听选择完毕后的回调方法 | | | |