前端实习手记(7):立秋快乐

这周相比上周感觉挺好的哈哈哈,可能只有自己感觉蛮好的,旁边师父忙的飞起了要,不仅赶工作还要回答我乱七八糟的问题(心疼一秒)。这周也是立秋&七夕咯,立秋快乐哇家人们(虽然还是很热嘛)

总结

  • 上周新增自定义表单对话框修改完善
  • 更多筛选模特对话框 完成
  • Vue.js

筛选模特对话框

功能概述

  • 筛选模特的性别地域信息,选中模特,点击确定会将模特添加模特列表的最前面并关闭对话框,点击删除会删除模特并刷新列表。

思路

  • 框架搭建(这点就不说了)
  • 筛选逻辑
  • 刷新列表
  • 删除逻辑
  • 取消与确定添加逻辑

一、筛选逻辑

  • 绑定 sexList 数据列表,并将 state.sexCheckedList 作为当前选中的值列表。
  • 在选择器中做出选择时,触发 onSexChecked 和 onAreaChecked 方法。
  • 事件处理方法:onSexChecked: 当用户选择性别时,此方法被调用,并更新 state.sexCheckedList
  • 携带筛选到的列表数据id,请求后端返回数据
  • 这里要注意map的使用,在处理后端返回的数据时经过map处理会返回一个数组,后面需要把list赋给数组类型的datalist,所以这里使用map。

二、刷新列表

  • 将后端返回数据赋给我们使用的字段
  • 在组件一挂载时就更新列表

三、删除逻辑

  • 点击删除图标,触发相应事件
  • 获取所选模特的id
  • 携带参数发送请求
  • 再次刷新列表
const modelDeleted = async (modelInfo: ModelInfo) => {
  state.remove = true;
  console.log('modelDeleted');
  const path = '/resource/xxx';
  const params = {
    id: modelInfo.id,
  };
  await Http.post(path, params);
  getModelList();
};

四、取消与确定

  • 这里还是使用了emits将事件交由父组件监听并执行相应的方法。
  • 定义emits: 在子组件的选项中定义 emits 选项来声明组件可以触发的事件名称。
  • 触发事件: 使用 $emit 方法来触发这些事件,并传递相应的参数。
  • 父组件使用@监听事件,并执行相应的处理函数。

  • 完整代码

写在最后

  • 又是熬夜的一天,一到晚上精神就好起来了(现在还是有点困了)
  • 论实习遇到神仙师父什么感受哈哈哈,庆幸自己实习遇到的人都蛮好!开心开心(嘻嘻)
  • 潦草的周报啊啊怎么写嘛!(不嘻嘻)
  • 滚去睡觉了,开启第八周咯(马上俩月了啊啊怎么怎么这么快)

你可能感兴趣的:(实习杂记,前端实习,vue.js)