前端实习手记（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 方法来触发这些事件，并传递相应的参数。
• 父组件使用@监听事件，并执行相应的处理函数。

• 完整代码

写在最后

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