前端程序员Vue开发经验总结

1：ssd项目大屏和管理系统总结

echarts基础样式：

管理系统增删改查：

2：ms协同平台总结

流程开发：

element组件操作：

tabs标签：

   // 获得标签数组
    async getTabarr() {
      let date = this.date
      let id = this.diamondBlockId
      const params = {
        date: date,
        diamondBlockId: id
      }
      const resFormObj = await DiamondBlockinfo(params)//获取当前菱形块编号下表单数据
      const resTableArr = await BlastHoleStatusInfo(id)//获取当前菱形块编号下表格数据
      const dataObj = resFormObj.data
      const dataArr = resTableArr.data
      let nameArr = this.editableTabs.map(item => item.name)
      if (nameArr.includes(id)) {
        this.editableTabsValue = id
      } else {
        this.editableTabs.push({
          title: id + '日爆破确认',
          name: id,
          InfoForm: dataObj,
          showArr: this.changeList(dataArr),
          BlastholeData: dataArr
        })
        this.editableTabsValue = id
      }
      console.log('tabs数组', this.editableTabs);
    },
    // 移除标签
    removeTab(targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },

后端的数组重新生成新的数组两种方法：

1：foreach 可以生成一个自定义的数组对象

                const newlist = this.twolist

				this.list.forEach(item => {
					const data = {
						name_age: item.name + item.age
					}
					newlist.push(data)
				})

可以拿到一个自定义的newlist数组对象

2：map 操作原有的数组生成新数组字符串

	this.twolist = this.list.map(item => item.name + item.age)

更深一点的是 拿着返回的数组对象进行数组加字符串的操作：例如下面的函数方法：

changeList(list) {
      return list.map((hole) => {
        const item = Object.assign({}, hole)
        item.holeId = item.holeId.split("_")[1]
        if (item.holeNumber < 10) {
          item.holeNumber = "0" + item.holeNumber
        }
        return item
      })
    },

操作数组里面对象的值进行字符串的加工，不想更改原数组数据要浅拷贝一层。

父子组件总结：

1：父子组件不涉及相互业务的，只需父组件把查询条件传参到子组件即可，子组件进行接口查询

2：父组件传一个控制子组件的变量参数，实现控制子组件(例如v-for显示或者disable控制是否允许输入)

3：子组件v-for循环，如果循环的每个组件里面的属性不一样，需要在父组件里提前处理后端返回的数据，不应该直接拿后端返回的数据进行循环。思维：有时候后端返回的数据不好操作时，记得先处理一下数据，在渲染

接口返回的res比较杂乱，定义一个数组，拼凑成想要的数组集，再传给子组件循环
 $http.getSbfData().then((res: any) => {
      const data = res.data
      this.waterPumpCardBoxData = [
        {
          name: '新立-600',
          xl600CbMonth: data.xl600CbMonth,
          xl600PowerDay: data.xl600PowerDay,
          xl600PowerMonth: data.xl600PowerMonth,
          xl600PriceDay: data.xl600PriceDay,
          xl600PriceMonth: data.xl600PriceMonth,
          xl600PslDay: data.xl600PslDay,
          xl600PslMonth: data.xl600PslMonth,
        },
        {
          name: '西山-1140',
          xl600CbMonth: data.xs1140CbMonth,
          xl600PowerDay: data.xs1140PowerDay,
          xl600PowerMonth: data.xs1140PowerMonth,
          xl600PriceDay: data.xs1140PriceDay,
          xl600PriceMonth: data.xs1140PriceMonth,
          xl600PslDay: data.xs1140PslDay,
          xl600PslMonth: data.xs1140PslMonth,
        },
        {
          name: '西山-435',
          xl600CbMonth: data.xs435CbMonth,
          xl600PowerDay: data.xs435PowerDay,
          xl600PowerMonth: data.xs435PowerMonth,
          xl600PriceDay: data.xs435PriceDay,
          xl600PriceMonth: data.xs435PriceMonth,
          xl600PslDay: data.xs435PslDay,
          xl600PslMonth: data.xs435PslMonth,
        },
     ]