1.官网
https://element.eleme.cn/#/zh-CN/component/tree
2.el-tree 封装成组件
（1）先看效果
（2）组件components=》DivisionTree=》index.vue
index.vue代码
<template>
<div>
<el-input v-model="filterText" placeholder="请输入区划名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
<div class="flow-tree">
<div style="width: 218px">
<el-tree
ref="tree"
node-key="divisionCode"
:highlight-current="true"
:expand-on-click-node="false"
:check-on-click-node="true"
:data="treeData"
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="handleNodeClick"/>
</div>
</div>
</div>
</template>
<script>
import jsonData from '@/assets/json/division.json';
export default {
name: 'DivisionTree',
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
data() {
return {
filterText:null,
treeData: jsonData,
defaultProps: {
children: 'children',
label: 'name'
}
};
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
// 处理节点点击事件
handleNodeClick(data, node, component) {
this.$emit("listenToChildCode",data.code)
}
}
};
</script>
<style scoped lang="scss">
.flow-tree{
overflow: auto;
overflow-x: auto;
width: 100%;
max-height:750px;
}
</style>
（2）division.json
[
{
"code": "5201",
"name": "贵阳市",
"children": [
{
"code": "520102",
"name": "南明区",
"children": [
{
"code": "520102001",
"name": "五里冲街道"
},
{
"code": "520102002",
"name": "小车河街道"
},
{
"code": "520102203",
"name": "小碧布依族苗族乡"
}
]
},
{
"code": "520103",
"name": "云岩区",
"children": [
{
"code": "520103019",
"name": "大营路街道"
},
{
"code": "520103020",
"name": "黔灵东路街道"
},
{
"code": "520103100",
"name": "黔灵镇"
}
]
},
{
"code": "520111",
"name": "花溪区",
"children": [
{
"code": "520111001",
"name": "贵筑街道"
},
{
"code": "520111002",
"name": "阳光街道"
},
{
"code": "520111003",
"name": "清溪街道"
},
{
"code": "520111209",
"name": "马铃布依族苗族乡"
}
]
},
{
"code": "520112",
"name": "乌当区",
"children": [
{
"code": "520112001",
"name": "龙广路街道"
},
{
"code": "520112002",
"name": "新创路街道"
},
{
"code": "520112003",
"name": "观溪路街道"
},
{
"code": "520112206",
"name": "偏坡布依族乡"
}
]
},
{
"code": "520113",
"name": "白云区",
"children": [
{
"code": "520113001",
"name": "泉湖街道"
},
{
"code": "520113010",
"name": "大山洞街道"
},
{
"code": "520113204",
"name": "牛场布依族乡"
}
]
},
{
"code": "520115",
"name": "观山湖区",
"children": [
{
"code": "520115001",
"name": "宾阳街道"
},
{
"code": "520115002",
"name": "云潭街道"
},
{
"code": "520115102",
"name": "百花湖镇"
}
]
},
{
"code": "520121",
"name": "开阳县",
"children": [
{
"code": "520121001",
"name": "硒城街道"
},
{
"code": "520121209",
"name": "毛云乡"
}
]
},
{
"code": "520122",
"name": "息烽县",
"children": [
{
"code": "520122001",
"name": "永阳街道"
},
{
"code": "520122108",
"name": "流长镇"
},
{
"code": "520122200",
"name": "青山苗族乡"
}
]
},
{
"code": "520123",
"name": "修文县",
"children": [
{
"code": "520123001",
"name": "龙场街道"
},
{
"code": "520123002",
"name": "阳明洞街道"
},
{
"code": "520123204",
"name": "大石布依族乡"
}
]
},
{
"code": "520181",
"name": "清镇市",
"children": [
{
"code": "520181002",
"name": "滨湖街道"
},
{
"code": "520181204",
"name": "流长苗族乡"
}
]
}
]
}
]
(3)main.js 挂载组件
import DivisionTree from "@/components/DivisionTree"
Vue.component('DivisionTree', DivisionTree)
(4)使用
关键代码
<division-tree v-on:listenToChildCode="listenToChildCode"/>
<script>
export default {
methods: {
listenToChildCode(code){
this.queryParams.divisionCode=code;
this.getList();
},
}
};
</script>
完整代码
<template>
<div class="app-container">
<el-row :gutter="20">
<!--区划tree数据-->
<el-col :span="3" :xs="24">
<division-tree v-on:listenToChildCode="listenToChildCode"/>
</el-col>
<!--用户数据-->
<el-col :span="21" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="68px">
<el-form-item label="用户名称" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible"
:show-overflow-tooltip="true"/>
<el-table-column label="区划编码" align="center" prop="divisionCode" />
<el-table-column label="区划名称" align="center" prop="divisionName" width="200"/>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</el-col>
</el-row>
</div>
</template>
<script>
import { listUser } from "@/api/system/user";
export default {
name: "User",
data() {
return {
// 遮罩层
loading: true,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
userName: undefined,
divisionCode: undefined,
},
};
},
created() {
this.getList();
},
methods: {
/** 查询用户列表 */
getList() {
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
}
);
},
listenToChildCode(code){
this.queryParams.divisionCode=code;
this.getList();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = [];
this.resetForm("queryForm");
this.queryParams.divisionCode = undefined;
this.handleQuery();
},
}
};
</script>