列表封装-递归数据回显-全局数据挂载——基础积累

全局挂载数据

某些下拉选项或者配置项是固定的，将这些数据提取到一个单独的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">
     <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

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

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