el-tree-select的使用

如果本地启动API需要全局安装：npm install -g @vuese/cli需在main.js注册组件：import ElTreeSelect from 'el-tree-select';vue.use(ElTreeSelect);内部直接使用 :<el-tree-select v-model="id"/>...

文章共2,539字 · 阅读需要大约9分钟

一键AI生成摘要，助你高效阅读

问答

肆夕沐木

21164人浏览 · 2020-04-07 19:58:16

肆夕沐木 · 2020-04-07 19:58:16 发布

如果本地启动API需要全局安装：npm install -g @vuese/cli

需在main.js注册组件：

import ElTreeSelect from 'el-tree-select';
vue.use(ElTreeSelect);

内部直接使用 : `<el-tree-select v-model="id"/>`

el-tree-select Attributes

参数	说明	类型	可选值	默认值
selectParams	el-select组件的相关参数Select Attributes	boolean / string / number/function	—	—
1.styles	styles参数对el-select设置style	Object	—	—
2.selectClass	对el-select设置class	String	—	—
treeParams	el-tree组件的相关参数Tree Attributes	boolean / string / number/function	—	—
1.clickParent	treeParams.clickParent	Boolean	true 允许点击父级关闭弹出框; false 只能点击子级关闭弹出框	false
2.filterable	搜索框参数	Boolean	—	—
popover 参数	对应：popper-class	String	—	—

el-tree-select 取消el-select和el-tree中的参数

el-select 取消参数	取代参数
multiple	改为内置，通过v-model类型判断是否多选
filterable	filterable=“false” 搜索从弹出框里面执行
el-tree 取消参数	取代参数
show-checkbox	:show-checkbox="selectParams.multiple"使用下拉框参数multiple 判断是否对树进行多项
node-key	propsValue,自动获取treeParams.props.value
draggable	设置draggable=“false” 屏蔽拖动

el-tree-select Events

事件名称	说明	回调参数
select-clear	下拉框清空事件	this.$emit(‘select-clear’)
removeTag	移除单个标签，返回所有勾选的ids，以及当前移除的tag（可能为中文）标签	this.$emit(‘removeTag’,ids,tag)
node-click	树点击,和el-tree参数一致	this.$emit(‘node-click’, data, node, vm)
check	勾选触发,和el-tree参数一致	this.$emit(‘check’,data, node, vm)
treeDataUpdateFun	树更新数据	this.post(url,postobj,response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);})
searchFun	参数: keywords	`searchFun(value){// 如果是本地过滤 this.$refs.treeSelect.$refs.tree.filter(value);// 可以直接访问方法，也可以拿到 $refs.tree this.$refs.treeSelect.filterFun(val);// 如果是请求后台：this.post(url,postobj{keywords:value},response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);});}`
filterFun	参数: 本地过滤树	this.$refs.treeSelect.filterFun(val);

安装

npm install el-tree-select --save-dev

Demo

<template>
    <div id="app">
        <el-tree-select :styles="styles" v-model="values" :selectParams="selectParams" :treeParams="treeParams" :treeRenderFun="_renderFun" @searchFun="_searchFun" @node-click="_nodeClickFun" ref="treeSelect"/>
        <el-select multiple v-model="test" placeholder="请选择" @change="_selectChange">
            <el-option v-for="item in treeParams.data" :key="item.testId" :label="item.name" :value="item.testId"></el-option>
        </el-select>
    </div>
</template>
<style>
#app {
    display: flex;
    justify-content: space-between;
    width: 600px;
}
</style>
<script>
export default {
    name: 'App',
    data() {
        return {
            styles: {
                width: '300px'
            },
            test: '',
            values: ['11111'],
            selectParams: {
                multiple: true,
                clearable: true,
                placeholder: '请输入内容'
            },
            treeParams: {
                clickParent: false,
                filterable: true,
                'check-strictly': true,
                'default-expand-all': true,
                'expand-on-click-node': false,
                data: [],
                props: {
                    children: 'child',
                    label: 'name',
                    disabled: 'disabled',
                    value: 'testId'
                }
            }
        };
    },
    mounted() {
        let data = [
            {
                testId: '1',
                name: '节点1',
                disabled: true,
                child: [
                    {
                        testId: '11111',
                        name: '子节点'
                    }
                ]
            },
            {
                testId: '2',
                name: '节点2',
                child: [
                    {
                        testId: '222222',
                        disabled: true,
                        name: '子节点'
                    }
                ]
            },
            {
                testId: '3',
                name: '节点3'
            },
            {
                testId: '4',
                name: '节点4'
            },
            {
                testId: '5',
                name: '节点5'
            },
            {
                testId: '6',
                name: '节点6'
            }
        ];
        this.treeParams.data = data;
        this.$refs.treeSelect.treeDataUpdateFun(data);
    },
    methods: {
        // 下拉框修改
        _selectChange(val) {
            console.log(val, '<-select change');
        },
        // 树点击
        _nodeClickFun(data, node, vm) {
            console.log('this _nodeClickFun', this.values, data, node);
        },
        // 树过滤
        _searchFun(value) {
            console.log(value, '<--_searchFun');
            // 自行判断 是走后台查询，还是前端过滤
            // this.$refs.treeSelect.$refs.tree.filter(value);
            this.$refs.treeSelect.filterFun(value);
            // 后台查询
            // this.$refs.treeSelect.treeDataUpdateFun(treeData);
        },
        // 自定义render
        _renderFun(h, { node, data, store }) {
            return (
                <span class='custom-tree-node'>
                    <span>{node.label}</span>
                </span>
            );
        }
    },
    components: { }
};
</script>