前端要点整理

el-table依据rowIndex获取指定行

 // changePointRowStyle() {
    //   alert("方法被调用")
    //   debugger
    //  const row = this.taskList.find(item =>item.daDataImportTaskId ==12);
    //   if (row) {
    //     const rowIndex = this.taskList.indexOf(row);
    //     // 导入任务未正常终了的场合
    //     if(row.daDataImportStatus==='3' ){
    //       const tdEle =this.$refs.taskListTable.$el.querySelectorAll(`tbody tr:nth-child(${rowIndex + 1}) td`)[8]// get the td elements of the row
    //       tdEle.style.backgroundColor='LightGoldenRodYellow';
    //     }
    //   }
    // },

特定的业务场景实现

业务内容说明其他页面跳-》父组件页面-》父组件中将请求路由中的参数赋值给子组件
实现要点
1. 子组件中声明属性
2. 子组件使用属性值，动态渲染不同的组件
3. 父组件获取路由中的参数后，传递给子组件的属性

示例代码

其他页面，函数【openDataSourceTypeDialog】跳转

<el-dialog title="数据源类型" :visible.sync="this.addOpen" width="30%" center>  
<div class="data_source_type">  
    <label>数据源类型：</label>  
    <el-select v-model="dataSourceType" placeholder="请选择数据源类型">  
    <el-option  
    v-for="item in DATA_SOURCE_TYPES"  
    :key="item.value"  
    :label="item.label"  
    :value="item.value">  
    </el-option>  
    </el-select>  
</div>  
<span slot="footer" class="dialog-footer">  
<el-button @click="addOpen = false">取 消</el-button>  
<el-button type="primary" @click="openDataSourceTypeDialog">确 定</el-button>
</span>  
</el-dialog>

/** 数据源选择页面的确定按钮按下 */  
openDataSourceTypeDialog() {  
this.addOpen = false;  
this.$router.push({path: "/datamanage/dataimports/creator", query:      {dataSourceType: this.dataSourceType}});  
},

2. 父组件

<div v-show="active===1" class="step1">  
<Reader ref="reader" :dataSourceType="this.dataSourceType"/>  
</div>  
<div v-show="active===2" class="step2">  
<Writer ref="writer" :dataSourceType="this.dataSourceType"/>  
</div>

mounted() {  
    debugger  
    this.dataSourceType = this.$route.query.dataSourceType;  
    // 使用总线的方式，当Form校验成功后,steps 组件中下一步高量显示  
    bus.$on('validForm', () => {  
    this.addOneStepForElSteps();  
    })  

},

子组件

<template>  
    <div class="app-container">  
    <MysqlReader ref="mysqlreader" v-if="dataSourceType==='MYSQL'"></MysqlReader>  
    <HBaseReader ref="hbasereader" v-if="dataSourceType==='HBASE'"></HBaseReader>  
    <MongoDBReader ref="mongodbreader" v-if="dataSourceType==='MONGODB'"></MongoDBReader>  
    </div>  
</template>

Vue 中的生命周期函数

关键的生命周期函数

生命周期函数的内容，以及特征

graph LR
BeforeCreate-->Created; 
Created-->BeforeMount;
BeforeMount-->Mount;
Mount-->BeforeUpdate;
BeforeUpdate-->Update;
Update-->BeforeDestory;
BeforeDestory-->Destory;

BeforeCreate 实例未创建完全，此时组件中的属性，数据，方法均不能被调用
Created 实例构建,Vue实例创建完成后立即被执行，可以有效访问VUE实例中的属性，数据，方法等，但此时还未进行实例挂载，即就是无法有效的访问DOM元素
BeforeMount 此时模版已经编译完成，但还未完全渲染挂载在DOM上.
Mounted 挂载事件已经完成，此时可以访问DOM上的任意元素
BeoforeUpdate在数据更新之前被调用，此时虚拟 DOM 已经生成，但尚未重新渲染。
Updated在数据更新之后被调用，此时组件已经重新渲染，可以访问到更新后的 DOM 元素。
BeforeDestory 实例销毁之前，被调用。此时组件依然存在，DOM元素依然可以被访问
Destroyed 在实例销毁之后被调用，此时组件已经被销毁，无法访问到组件的属性和方法。

生命周期函数的最佳实践

在beforeCreate 函数内一般用于注册全局组件，访问数据库等操作。

初始化全局变量：在 beforeCreate 钩子函数中，可以初始化一些全局变量，例如 Vuex 的 store、Vue Router 的 router 等。
注册全局事件：在 beforeCreate 钩子函数中，可以注册一些全局事件，例如监听浏览器窗口大小变化等。
进行身份验证：在 beforeCreate 钩子函数中，可以进行身份验证，例如判断用户是否已登录等。
初始化实例属性：在 beforeCreate 钩子函数中，可以初始化一些实例属性，例如计算属性、监听属性等。

Created 函数，常见的被用于初始化数据
BeforeMount：初始化数据，或者发送请求后数据的赋值
Mounted:挂载后可获取DOM中的任意元素。用于进行一些 DOM 操作或调用第三方库等操作，例如渲染图表、绑定事件等
BeforeUpdate：用于进行一些数据操作或异步请求等操作，例如更新数据、重新获取数据等
Updated：用于进行一些 DOM 操作或调用第三方库等操作，例如重新渲染图表、重新绑定事件等。
BeforeDestroy：用于进行一些清理工作或取消事件监听等操作，例如取消定时器、取消事件监听等。
Destroyed：用于进行一些清理工作或取消事件监听等操作，例如释放资源、取消事件监听等。

集成jsonEditor 实现json文件的在线编辑，预览，保存。

前端的在线代码代码编辑器

开发中的问题

问题1

事象：组件el-table-column
原因：
解决方案：

问题2

事象，内容：在Vue中如何在子组件上获取路由中得到参数
解决方案：在 Vue 的子组件中获取路由上的参数，可以使用 $route 对象来访问当前路由信息。$route 对象包含了当前路由的各种信息，例如路由路径、参数、查询参数等。
示例

export default {
 mounted() {
   const userId = this.$route.params.id;
   // 根据用户 ID 获取用户信息
   fetch(`https://api.example.com/users/${userId}`)
     .then(response => response.json())
     .then(data => {
       // 处理用户信息
     });
 }
}

开发中需求

🟥组件el-table-column 中显示值处理

需求：字段任务status的db 值分别为0,1,2对应任务的三种状态待执行,执行成功，执行失败 页面显示时，需要依据不同值显示器对应的状态文字
方案：组件el-table-columns的内置方法formatter

<el-table-column width="150" label="任务的状态" align="center"  
  prop="daDataImportStatus" :formatter="getTaskStatus" />
    
    
const TASKSTATUS = {  
    TODO:{value:0,label:"待执行"},  
    DONE:{value:3,label: "导入成功"},  
    ERROR:{value:2,label:"导入异常"}  
    }
  
getTaskStatus(row){  
    const daDataImportStatus = row.daDataImportStatus;  
    switch (daDataImportStatus){  
    case "0":  
    return TASKSTATUS.TODO.label;  
    case "2":  
    return TASKSTATUS.DONE.label;  
    case "3":  
    return TASKSTATUS.ERROR.label;  
    default:  
    return TASKSTATUS.TODO.label;  
    }  
},

前端技术栈要点

前端要点整理

el-table依据rowIndex获取指定行

特定的业务场景实现

Vue 中的生命周期函数

关键的生命周期函数

生命周期函数的内容，以及特征

生命周期函数的最佳实践

集成jsonEditor 实现json文件的在线编辑，预览，保存。

前端的在线代码代码编辑器

开发中的问题

开发中需求