全局挂载数据
某些下拉选项或者配置项是固定的，将这些数据提取到一个单独的js文件，对应页面使用只需要引入即可，这是数据共享的一种，此外还可以将数据挂载到vue.prototype中，配置原型名，完成后对应页面不用引入js文件，只需要全局使用配置名即可获取数据。
// main.js import {getDictObj} from "@/utils/dictObj.js" Vue.prototype.$dict = getDictObj() // 全局挂载
<!-- 页面使用： $dicy.名称 --> <el-select v-model="item.fvRoomNature" placeholder="请选择" @change="selectChangeHundle"> <el-option v-for="item in $dict.fvRoomNaturetypelist" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option> </el-select>
列表封装or表单封装
element的列表如果把原有的结构写上去，通常会涉及非常多的字段，如下：
<el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <!-- 更多列表.... --> </el-table>
这种列表信息可以通过遍历处理，例如我们给出对应字段
let table = [ // ... 对应字段 ]
利用对应字段在el-table上遍历节点，我们只需要修改数组信息即可实现动态的表单展示。
列表和表单的权限管理
此外我们还可以利用后台返回的权限列表数据进行判断比对，遍历出新的数据将新数据渲染到页面上
Object.entries(el.data).forEach(item=>{ showArr.forEach(res=>{ if(res.fvEnName == item[0]){ res.fvEnName = item[1] // this.$set(res,'K',item[0]) } if(res.fvDemc == item[0]){ res.fvDemc = item[1] // this.$set(res,'K2',item[0]) } }) }) })
element tree的父级name拼接：A-AA-AAA
<el-tree :data="treedata" node-key="id" @node-click="treeChange" :props="defaultProps" lazy :load="treeLoad" > <span slot-scope="{ node, data }"> <i :class="data.icon"></i> <span style="padding-left: 4px;">{{node.label}}</span> </span> </el-tree>
var res = [ {code: 1, name: "湖北省", children: [{ code: 1, name: "武汉市", children: [ {code: 1, name: "洪山区", children: [{ code: 1, name: "光谷广场" }] }, {code: 1, name: "青山区", children: [{ code: 1, name: "青山大街" }] }] }]
点击光谷广场节点，父级name拼接：武汉市-洪山区-光谷广场，利用递归实现拼接。
treeChange(e, no) { // e：当前点击节点 ，no当前点击节点以及父级节点信息。 let str = this.getLabel(no); // str - e.name : 湖北省-武汉市-洪山区-光谷广场,这里利用数组join('-')即可实现 this.$emit("ObjHandle", e,str) }, // 获取父级节点名称 getLabel(data){ let arr = []; inits(data); function inits(params){ // 当前节点的父级的父级为null说明到了一级节点，直接终止递归。 if(!params.parent.parent) { return; }; // 如果不是则向数组的首位添加，因为树形节点是由内向外的遍历 arr.unshift(params.parent.data.name) inits(params.parent); // 将当前最新的节点传入，递归遍历。 } return arr.join('-'); // 返回最终的结果:湖北省-武汉市-洪山区 }
element tree组件连接线以及懒加载 （👈点击直达）
再也不用担心组件跨层级的数据共享和方法驱动了 （👈点击直达）
前端换肤，聊一聊主题切换那些事（👈点击直达）
echarts数据可视化-动态折线堆积图 （👈点击直达）
vue3使用百度地图（👈点击直达）
如果觉得这篇文章对你有帮助，欢迎点赞👍、收藏💖、转发✨哦~
