列表封装-递归数据回显-全局数据挂载

兔子先森Ace

已于 2023-06-30 16:50:28 修改

阅读量637

点赞数

分类专栏：日常积累文章标签： vue.js 前端 javascript 前端框架 html5

于 2023-06-22 13:19:30 首次发布

本文链接：https://blog.csdn.net/qq_44793507/article/details/131340153

版权

日常积累专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

全局挂载数据

某些下拉选项或者配置项是固定的，将这些数据提取到一个单独的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('-');  // 返回最终的结果:湖北省-武汉市-洪山区
}