当前位置：首页 > news >正文

el-tree 使用笔记

news 2024/11/23 17:37:10

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-treeref="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();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.queryParams.divisionCode = undefined;this.handleQuery();},}
};
</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-inputv-model="queryParams.userName"placeholder="请输入用户名称"clearablestyle="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><paginationv-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>