遇到的问题

1. 在页面加载时,由于对象更新问题,dom没有更新.

代码重现

 <el-menu>
	 <el-submenu
		v-for="(classify, index) in nodeTypeTree"
 		:key="index"
 		:index="classify.processId + ''"
	 >
 	</el-submenu>
</el-menu>

 private async mounted(): Promise<void> {
    this.getList();
 }
 private async getAllNodeType(): Promise<void> {
    const response = await Service.getList({});
    this.listTree = this.handleTree(response.rows, 'id', 'parentsId');
    this.listTree.forEach(async item=> {
      if (item.type=== '0') {
        const res = await Service.getList({
          type: item.type,
        });
         item.children = res.rows; -----问题出现部分
      }
    });
  }

问题:

数据量如果过大,无法及时更新数组,导致submenu展开后节点为空.

问题原因及解决方案:

*对象更新时,Vue 不能及时检测对象属性的添加或删除.*

// 改变对象更新的方法
/* 
   1.  this.$set(item, 'children', res.rows);
   2.  Object.assign({},item)
*/
private async getAllNodeType(): Promise<void> {
    const response = await Service.getList({});
    this.listTree = this.handleTree(response.rows, 'id', 'parentsId');
    this.listTree.forEach(async item=> {
      if (item.type=== '0') {
        const res = await Service.getList({
          type: item.type,
        });
          this.$set(classify, 'children', res.rows);
      }
    });
  }

2. 使用element Form表单时,回车刷新页面.

问题原因:

form表单内,只有一个<el-input></el-input>输入框时,回车会自动提交导致刷新页面

解决方案:

阻止form的默认事件,在form上加上：@submit.native.prevent

<el-form ref="form"  :model="form" label-width="120px" @submit.native.prevent>
      <el-input v-model="form.username"  placeholder="请输入用户名" @keyup.enter.native="search"></el-input>
 </el-form>

3. el-table + 分页选中问题

问题:

el-table在第一页选中后,跳转至第二页新增选中,后切回第一页,之前选中的选项会消失;
由于分页是由后端完成,前端换页时向后端请求数据,所以单纯依靠element的reserve-selection与row-key很困难.

解决方案:

主要::手动完成checkbox的勾选
1.设定一个数组,存储被选中对象:selectList;
2.选中checkbox时,向数组内添加该对象id; 反选时,删除数组内该对象id;
3.根据selectList,使用element方法toggleRowSelection进行勾选;
4.全选以及全不选可使用el-table中@select-all(当用户手动勾选全选 Checkbox 时触发的事件)来完成;
5.注意数组的去重.

html

<el-table
	ref="xTable"
	:data="tableList"
	class="cus-table"
	height="350"
	max-height="350"
	row-key="id"
	@select="handleSelection"
	@select-all="handleSelectionAll"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :selectable="forbid"
      />
      ...
      ...
</el-table>

表格操作

 private tableList= []; // 表格数据
 private selectList = []; // 选中选项
 
 // 单项选中\反选
 private handleSelection(rows, row) {
    if (rows.length === 0) {
      this.tableList.forEach(item => {
        const has = this.selectList.find(i => i === item.id.toString());
        if (has) {
          this.selectList.remove(i => i === item.id.toString());
        }
      });
      return;
    }
    // 判断selection是否有值存在
    if (row) {
      const selected = rows.length && rows.indexOf(row) !== -1;
      if (selected === true) {
        this.selectList.push(row.id.toString());
      } else {
        this.selectList.remove(item => item === row.id.toString());
      }
    }
    // 去重
    this.selectList = this.unique(this.selectList);
 }
 
 // 全选\全不选
 private handleSelectionAll(rows) {
    /* 1.整合数组 */
    if (this.getIsAllChecked()) {
      // 全选
      rows.forEach(item => {
        this.selectList.push(item.id.toString());
      });
    } else {
      // 全不选  this.tableList为当前页数据遍历删除
      this.tableList.forEach(item => {
        const has = this.selectList.find(i => i === item.id.toString());
        if (has) {
          this.selectList.remove(i => i === item.id.toString());
        }
      });
    }
    /* 2.去重 */
    this.selectList = this.unique(this.selectList);
 }
 	
  // 全选勾选状态
  private getIsAllChecked() {
    return (this.$refs.xTable as any).store.states.isAllSelected;
  }
 
 // 去重
 private unique(arr) {
    for (let i = 0, len = arr.length; i < len; i++) {
      for (let j = i + 1, len2 = arr.length; j < len2; j++) {
        if (arr[i] === arr[j]) {
          arr.splice(j, 1);
          j--; // 每删除一个数j的值就减1
          len2--; // j值减小时len也要相应减1（减少循环次数，节省性能）
        }
      }
    }
    return arr.sort(); // 排序
 }

换页后操作

 // 换页时,调用getList方法,获取本页table数据
 private getList() {
  	  // 从后端获取数据
  	  // ******
  	  
      // 勾选
      this.getselected();
 }
 private async getselected() {
    this.$nextTick(() => {
      this.selectList.forEach(item => {
        this.tableList.forEach(camera => {
          const check = camera.id === Number(item);
          if (check) {
            (this.$refs.xTable as any).toggleRowSelection(camera, true); // 勾选
          }
        });
      });
    });
  }

4. 动态增减表单项的表单校验问题

问题:

 <el-form ref="processInfo" :model="processInfo" label-width="120px">
 	<el-form-item
    	v-for="(para, index) of parame.parameList"
    	:key="para.name"
    	:label="`参数:${para.name}`"
    	:prop="'parameList.' + index + '.value'"
    	:rules="[
    	  {
     	   required: true,
    	    message: '不能为空',
     	   trigger: 'blur'
   	   	  }
   	 	]"
	 >
   <el-input  v-model="para.value"></el-input>
   </el-form-item>
</el-form>

添加表单校验, prop与对应model此时符合要求,但是仍然报错`please transfer a valid prop path to form item!`

解决方案:

出现该问题的原因是,不只是prop与model ,,prop与for所对应循环列表名称对应,  
还有el-form所绑定的:model要与for循环中数组所在对象对应.

 <el-form ref="processInfo" :model="processInfo" label-width="120px">
      <el-form-item
        v-for="(para, index) of processInfo.parameList"
        :key="para.name"
        :label="`参数:${para.name}`"
        :prop="'parameList.' + index + '.value'"
        :rules="[
          {
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }
        ]"
      >
          <el-input  v-model="para.value"></el-input>
      </el-form-item>
 </el-form>

注意:

processInfo.parameList的值,可能是之后赋值,同样存在对象更新的问题(问题一)导致表单校验不成功, 
此时的解决方案,parameList赋值时,同样使用this.$set(xxx, 'yyy', zzz);的方法

4. 0.1 + 0.2 === 0.30000000000000004

问题

在编写使用计时器完成0-1 以0.1的增长量自增的时候,发现出现了以下问题.

出现原因

简单来说,js中对于数字,仅有Number类型,不区分整数型和浮点型, 对于Number类型的的有效范围是-0XFFFFFFFFFFF至0X1FFFFFFFFFF,无法更加精确.
事实上,并不是只有JS会出现这样的情况,只要是采用IEEE 754 Floating-point的浮点数编码方式来表示浮点数时，都会产生这类问题.

解决方案

仅仅针对我的需求来说,只需要将浮点数提升10的N次方倍再除以10的N次方(既令该浮点数大于1)

4. 多个组件同时引用的问题

问题

在同时引用多个组件的时候,发现第一个组件会被第二个组件替换

解决方案

组件中,即使不引用其他组件,仍需要写@Component({})

5. 在使用echarts过程中,视图移动饼图(pie)位置,grid属性无效.

解决方案:

饼图位置可以由center(圆心位置)属性控制(center: ['50%', '40%'])

6.Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘indexOf‘)

问题

使用el-form表单时,在el-form-item标签中加入v-if, 表单进行校验时报出该错误

解决方案

将el-form-item外侧嵌套div ,将v-if 写入div标签

<div v-if='xxx === ???'>
	<el-form-item ... >
	</el-form-item>
</div>

7.grid-row-gap使用百分比单位会导致内容溢出容器

问题

  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-row-gap: 10px;
  grid-column-gap: 20px;

这样使用时, 底部会溢出10px的区域

解决方案

改为使用其他单位

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 20px;

8. echarts雷达图指示器名称的配置项axisName不起作用.

版本问题, echarts在5.x的版本中, 将雷达图中 name, nameGap 属性替换为 axisName, axisNameGap .

9. 数字转化为人民币表达方式(带逗号的形式)

 private withComma(num) {
    return String(parseFloat(num).toFixed(2))
      .split('')
      .reverse()
      .map((item, index) => {
        return index > 3 && !(index % 3) ? item + ',' : item;
      })
      .reverse()
      .join('')
      .replace(/[.]?0+$/g, ''); // 去除小数点后多余0
  }

10. el-table 根据相同字段合并

private objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    const arr = this.tableData;
    let rowspan = 1;
    let colspan = 1;
    // 要合并的列数
    const spanColumn = [0];
    // 如果是要合并的行
    if (spanColumn.includes(columnIndex)) {
      // 遍历，如果有相同就加1
      for (let i = rowIndex + 1; i < arr.length; i++) {
        // 字段相同的合并
        if (row.type === arr[i].type) {
          rowspan++;
        } else {
          break;
        }
      }
      // 如果行号大于0，判断字段等于当前行的上一行就是00 这里的逻辑666
      if (rowIndex > 0 && row.type === arr[rowIndex - 1].type) {
        rowspan = 0;
        colspan = 0;
      }
    }

    // 最后就是返回
    return {
      rowspan,
      colspan
    };
  }

11. 使用v-if 区分el-table时, 出现错误

出现问题

Ⅰ.表一 可以进行多选, 而表二无selection属性列 仍有该多选列;
Ⅱ. 出现Error in render: "TypeError: Cannot read properties of undefined (reading ‘length’)"错误, 经查看表一该列有使用slot-scope进行某些特殊化显示, 而表二该列没有使用.

产生原因

使用v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现数据冲突导致table渲染出错

解决方法

需要给el-table加上个key值.

12. el-icon高出文字的问题

问题现象

解决方案

给el-icon元素添加 style=‘vertical-align: -18%;’ 数值可进行修改.