js、vue2、3，uniapp项目所遇问题记录，避免翻找原来项目

瞎子拍照

已于 2025-05-12 09:41:52 修改

阅读量689

点赞数 4

文章标签： vue.js javascript 前端 echarts

于 2024-03-21 11:48:46 首次发布

本文链接：https://blog.youkuaiyun.com/reed_0805/article/details/136903934

版权

本文详细介绍了JavaScript中的数组去重方法、echarts图形定制、动态宽度设置、Vue组件缓存、滚动控制、图表滚动动画、颜色图例管理、vuex状态管理以及HTML2Canvas截图技巧和cookie值获取，旨在提供项目开发中的实用参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：记录项目相遇功能难点，为后续项目做参考，避免翻找原来项目

1.折叠面板（展开多个面板、手风琴效果）

// 1. 可同时展开多个面板，面板之间不影响

// closedIndexes：array 收起索引数组 （如果当前项已在关闭列表中）
if (this.closedIndexes.includes(uuid)) { 
  // 移除它，使其展开
  this.closedIndexes = this.closedIndexes.filter(index => index !== uuid); 
  } else { 
  // 当前项不在关闭列表中，将其添加进去并收起
  this.closedIndexes.push(uuid);
}

// 模板样式样式
closedIndexes.includes(a.uuid)?'展开样式':'收起样式'


// 2.手风琴效果,每次只能展开一个面板 

// dropIndex：string|number 当前打开的索引（点击项等于dropIndex ，先置空再赋值）
if (this.dropIndex === i) {
  return this.dropIndex = ''
}
this.dropIndex = i

// 模板样式样式
dropIndex===index ? 'arrow-up' : 'arrow-down'

2.树状数据根据children递归处理成一维数组

    function getFlatArr(arr) {
        return arr.reduce((val, item) => {
          let flatArr = [...val, item];
          if (item.children) {
            flatArr = [...flatArr, ...getFlatArr(item.children)];
          }
          return flatArr;
        }, []);
      }

3.uniapp中uview2复选框组件全选反选

<template>
  <u-checkbox-group v-model="checkboxValue" placement="column">
    <view class="card mb-30" v-for="(item,index) in list" :key="index">
      <u-checkbox class="fw" shape="circle" :checked="item.checked" :label="item.label" :name="item.id" @change="e=>checkItemChange(e,item)" />
      <u-checkbox shape="circle" label="全选" name="all" :checked="checkAll" @change="checkAllChange" />
    </view>
  </u-checkbox-group>
</template>

<script>
  export default {
	data() {
		return {
			// 列表
			list: [{ label: '检修项目1', id: 1, checked: false }, {label: '检修项目2',checked: false,id: 2}],
			checkboxValue: [],
			checkAll: false,
		}
	},
	methods: {
		checkItemChange(checked, item) {
			item.checked = checked
			this.$nextTick(() => {
				const checkLength = this.checkboxValue.filter(f => f != 'all')
				this.checkAll = (checkLength.length === this.list.length)
			})
		},
		checkAllChange(n) {
			this.checkAll = n
			this.list.map(c => c.checked = n)
	  }
	}
  }
</script>

4.递归数组、对象（实现深拷贝）

function deepClone(origin = {}, target = {}) {
  for (let prop in origin) {
    if (origin.hasOwnProperty(prop)) {
      if (origin[prop] !== null && typeof (origin[prop]) === 'object') {
        target[prop] = Array.isArray(origin[prop]) ? [] : {}
        deepClone(origin[prop], target[prop])
      } else {
        target[prop] = origin[prop]
      }
    }
  }
  return target
}

const obj1 = [1,2,3,[1,2,3]]
const obj2 = []
deepClone(obj1, obj2)

5.纯前端实现表格下载（基于你的数据结构）

function exportToCSV(columns, data, filename = 'export.csv') {
  // 准备表头
  const headers = columns.map(col => col.label).join(',');
  
  // 准备数据行
  const rows = data.map(item => {
    return columns.map(col => {
      // 处理普通数据，防止逗号破坏CSV结构
      return `"${item[col.prop] || ''}"`;
    }).join(',');
  }).join('\n');
  
  // 合并为完整CSV内容
  const csvContent = `${headers}\n${rows}`;
  
  // 创建下载链接
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  const url = URL.createObjectURL(blob);
  
  link.href = url;
  link.download = filename;
  link.click();
  
  // 释放内存
  setTimeout(() => {
    URL.revokeObjectURL(url);
  }, 100);
}

// 列配置数组
const columns = [
  { label: '存储仓库', prop: 'store_name' },
  ...
];
// 你的表格数据数组 
const tableData = [{store_name:'仓库1', ...}];

exportToCSV(columns, tableData, '物料库存表.csv');

结语：后续持续更新......