tree-picker v0.0.26

tree-picker

tree-picker is sample Three-level linkage selection, you can use it to choose area, department,or personnel,

安装

npm i tree-picker

使用指南

使用默认数据,

可以获取通过onchange方法，获取更改后的数据。

<template>
    <treePicker @onchange="getChoosed"/>
</template>

<script>
import treePicker from 'tree-picker';
export default {
	components: {
		treePicker,
	},
	data() {
		return {};
	},
	methods: {
		getChoosed(val) {
			console.log(val);
		}
	}
};
</script>

设置默认值,

<tree-picker
            value="陕西省 西安市 新城区"
            split=" "
            :level=3
	    	@change ="getChoosed"
            @hide="areaHide"
			@show="areaShow"
    	></tree-picker>

   export default {
        data() {
            return {};
        },
        methods: {
            getChoosed(val) {
                console.log(val);
            },
            areaHide() {
                console.log('隐藏');
            },
            areaShow() {
                console.log('显示');
            },
        },
        components: { 'tree-picker': treePicker },
    };

一次性加载所有数据

注意：mode = 1,可以使用v-model获取修改后的数据；

<template>
    <tree-picker
			value=""
	    	:data = "getAreas"
	    	:mode=1
	    	child="child",
	    	pid="parent_id",
	    	orgdata={true}
	    	@change ="getChoosed">
    	</tree-picker>
</template>

<script>
import treePicker from 'tree-picker';
export default {
	components: {
		treePicker,
	},
	data() {
		return {};
	},
	methods: {
		getChoosed(val) {
			console.log(val);
		},
		getAreas(){
		    //返回一个promise
		    return Promise
		}
	}
};
</script>

分块加载数据

注意：设置mode=2;

<template>
    <tree-picker
	    	:data = "getAreas"
	    	:mode=2
	    	@change ="getChoosed">
    	</tree-picker>
</template>

<script>
import treePicker from 'tree-picker';
export default {
	components: {
		treePicker,
	},
	data() {
		return {};
	},
	methods: {
		getChoosed(val) {
			console.log(val);
		},
		getAreas(){
		    //返回一个promise
		    return Promise
		}
	}
};
</script>

兼容form-item

注意：vbeauty = true; prop设置成关联字段名称，v-model设置成关联字段，具体用法和form-item用法一样。

<template>
    <v-form :model="customForm" :rules="customRules" ref='customRuleForm'>
        <tree-picker
	    	:data = "getAreas"
	    	:initShowList="customForm.address"
	    	:vbeauty=true
	    	:mode=2
	    	prop="address"
	    	v-model="customForm.address"
	    	@change ="getChoosed">
    	</tree-picker>
    </v-form>
</template>

<script>
import treePicker from 'tree-picker';
export default {
	components: {
		treePicker,
	},
	data() {
	    //可参照form-item设置自定义验证规则
		return {
		    customForm: {
				[
					{ code: "360000", name: "江西省" },
					{ code: "360100", name: "南昌市" },
					{ code: "360101", name: "直辖区" }
				]
			},
			customRules: {
				address: [
					{
						required: true,
						message: "请选择地址"
					}
				]
			},
		};
	},
	methods: {
		getChoosed(val) {
			console.log(val);
		},
		getAreas(){
		    //返回一个promise
		    return Promise
		}
	}
};
</script>

API

tree-picker props

area-picker Method