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

参数 | 说明 | 类型 | 默认值 ---|---|---|---| data | 获取展示数据的函数，初始化必需参数，返回值必须是Promise对象,该函数默认接收一个请求参数 | Function | - value | 指定默认值，可以为"四川省,成都市,武侯区",如果分隔符非;时，需要传递下面一个参数 | String | - split | 当传递的默认值为"四川省 成都市 武侯区"这种格式时，指定数据分割方式， | String | ; level | 指定选择层级，"level=1；省。level=2；省市。level=3；省市县" | Number | 3 mode | 0:使用默认数据；1:一次加载所有数据；2:分块加载数据 | Number | 0 clue | 选项的id | String | id name | 选项的名称 | String | area_name label | 标签名 | String | "地址" initShowList | 当存在value时，value的优先级高于initShowList 设置默认值 | Array | - pid | 当一次性加载数据时，重组数据时的关联字段 | String | parent_id child | 数据层级名称 | String | child orgdata | 是否使用默认重组数据方法 | Boolean | false vbeauty | 是否使用form-item,如果为true,则可以设置表单验证内容 | Boolean | false v-model| 双向绑定数据【兼容form-item时需要】| - | - prop | form-item 的prop属性，配合vbeauty=true使用 | String | -

area-picker Method

事件 | 说明 | 参数 ---|---|--- change | 选择的值发生变化的时候触发，默认返回选中区域数组 | value hide | 隐藏选择面板时触发 | value show | 打开选择面板时触发 | value