当前位置：首页 > news >正文

蓝桥杯 web 表格数据转化（组件挂载、模板字符串）

news 2025/7/12 18:40:03

答案：

 mounted() {
    axios.get('./fetchTableData.json')
      .then((res) => {
        console.log(res.data.data); // 打印原始数据
        res.data.data.forEach(element => {
          element.sex = element.sex == 1 ? '男' : '女';
          element.vip = element.vip == 1 ? '是' : '否';
          element.datetime = element.datetime.slice(0,4) + '-' + 
                            element.datetime.slice(4,6) + '-' + 
                            element.datetime.slice(6,8);
          this.tableData.push(element); // 将处理后的数据推入数组
        });
      })
      .catch(error => {
        console.error('请求失败:', error);
      });
  }
};

1. `mounted()` 生命周期钩子

作用：这是 Vue.js 的一个生命周期钩子，当组件被挂载到 DOM 后会立即执行。
常见用途：初始化数据、发起网络请求、DOM 操作等。

2. `axios.get('./fetchTableData.json')`

axios：一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。
get 方法：发起一个 GET 请求，参数是请求的 URL（./fetchTableData.json）。
返回值：返回一个 Promise 对象，成功时会调用 .then()，失败时会调用 .catch()（但这里未处理错误）。

示例响应结构：

假设 fetchTableData.json 的内容如下：

{
  "data": [
    {
      "id": 1,
      "name": "张三",
      "sex": 1,
      "vip": 1,
      "datetime": "20230331"
    },
    // 其他数据项...
  ]
}

因此，res.data.data 是一个数组，存放所有数据项。

3. `.then((res) => { ... })`

then 方法：用于处理 Promise 成功后的响应。
res：响应对象，包含服务器返回的数据。
res.data：响应的 JSON 数据内容。
res.data.data：根据 JSON 结构，假设数据存储在 data 字段中。

4. `console.log(res.data.data)`

作用：打印原始数据到控制台，用于调试。

5. `res.data.data.forEach(element => { ... })`

forEach：遍历数组中的每个元素（element 是当前数据项）。
目标：对每个数据项进行格式化处理。
.forEach(...)：
- forEach 是 JavaScript 数组的高阶函数，用于遍历数组中的每个元素。
- 它会依次调用回调函数，每个元素都会执行一次回调。
element => { ... }：
- 回调函数的参数 element 表示当前正在处理的数组元素。
- 回调函数中可以对 element 进行任何操作（如修改属性、计算、打印等）。

6. `element.sex = element.sex == 1 ? '男' : '女';`

作用：将 sex 字段的数值（1 或 0）转换为文字（男或女）。
三元运算符：条件 ? 表达式1 : 表达式2，如果 element.sex 是 1，则设为 '男'，否则设为 '女'。

7. `element.vip = element.vip == 1 ? '是' : '否';`

作用：将 vip 字段的数值（1 或 0）转换为文字（是或否）。

8. `element.datetime = element.datetime.slice(0,4) + '-' + element.datetime.slice(4,6) + '-' + element.datetime.slice(6,8)`

作用：将日期字符串 YYYYMMDD 格式化为 YYYY-MM-DD。
slice 方法：
- slice(0,4)：提取前 4 位（年份，如 2023）。
- slice(4,6)：提取第 5-6 位（月份，如 03）。
- slice(6,8)：提取第 7-8 位（日期，如 31）。
结果：将 20230331 转换为 2023-03-31。

9. `this.tableData.push(element)`

this.tableData：假设这是一个 Vue 组件的 data 属性，用于存储表格数据。
push 方法：将处理后的 element 添加到 tableData 数组中，以便后续在模板中渲染。

完整代码逻辑流程

组件挂载后，发送 GET 请求获取 JSON 数据。
成功获取数据后，遍历每个数据项：
- 将 sex 和 vip 的数值转换为文字。
- 格式化 datetime 字段为 YYYY-MM-DD。
将处理后的数据逐条推入 tableData 数组。
最终效果：表格数据被渲染到页面上，显示更友好的格式（如性别显示为“男/女”，日期显示为“2023-03-31”）。

可能的疑问与注意事项

为什么用 mounted 而不是 created？
- 如果需要在 DOM 渲染后操作 DOM，用 mounted；如果只是获取数据，created 也可以。这里可能为了确保数据处理后立即渲染。
this 的指向问题：
- 在箭头函数 () => { ... } 中，this 会指向 Vue 实例，因此可以直接访问 this.tableData。如果使用普通函数，this 可能会指向错误的上下文。
错误处理：
- 目前代码未处理请求失败的情况，建议添加 .catch(error => { console.error(error) })。
数据响应性：
- tableData 必须是 Vue 的响应式数据（在 data 函数中定义），否则视图不会更新。