全局挂载数据

某些下拉选项或者配置项是固定的，将这些数据提取到一个单独的js文件，对应页面使用只需要引入即可，这是数据共享的一种，此外还可以将数据挂载到vue.prototype中，配置原型名，完成后对应页面不用引入js文件，只需要全局使用配置名即可获取数据。

// main.js import {getDictObj} from "@/utils/dictObj.js" Vue.prototype.$dict = getDictObj() // 全局挂载

 <el-select  v-model="item.fvRoomNature"  placeholder="请选择"  @change="selectChangeHundle">

列表封装or表单封装

element的列表如果把原有的结构写上去，通常会涉及非常多的字段，如下：

<el-table  :data="tableData"  style="width: 100%">  <el-table-column prop="date"  label="日期"  width="180">   <el-table-column  prop="name"  label="姓名"  width="180">   <el-table-column  prop="address"  label="地址">

这种列表信息可以通过遍历处理，例如我们给出对应字段

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

     { {node.label}}

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使用百度地图（点击直达）

如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~