前端系列21集-vue3，轨迹展示

AMap.InfoWindow

import { ref, reactive, computed } from 'vue';

// 定义样式变量
const width = ref(200); // 使用 ref 创建响应式样式变量
const height = ref(100);
const color = ref('blue');

// 创建一个计算属性，用于组合样式
const customStyle = computed(() => ({
  width: `${width.value}px`,
  height: `${height.value}px`,
  backgroundColor: color.value,
}));

// 示例：在组件中更新样式变量
setTimeout(() => {
  width.value = 300; // 改变宽度，触发计算属性更新样式
  color.value = 'red'; // 改变颜色，触发计算属性更新样式
}, 2000);

以下是一个完整的Vue 3示例，使用Element UI的el-table组件和el-table-column组件来展示订单号数据，并在内容溢出时显示tooltip：

在这个示例中，我们使用了Vue的data选项来定义了一个名为orderList的数组，其中包含了多个订单对象，每个对象都有一个orderId字段以及其他与订单相关的数据。

然后，我们在el-table组件中使用:data属性将orderList数组作为表格的数据源。接着，我们在el-table-column中使用prop属性指定了要显示的数据字段，即"orderId"。

在el-table-column中使用了插槽（slot）来自定义表格列的内容，使用了Vue 3的新语法

在上面的示例中，我们使用 map() 方法遍历 row.roles 数组，并获取每个角色的名称。然后，使用 join(', ') 方法将这些名称使用逗号进行分隔，并将结果显示在 元素中。

确保在 row.roles 数组中的每个角色对象中包含一个名为 name 的属性，以便正确获取角色名称。

请根据你的实际数据结构和需求，调整上述代码中的变量名和属性名。

这样，当表格渲染时，将遍历数组中的角色，并将它们的名称使用逗号分隔显示在表格列中。

要从event.data中提取嵌套的JSON数据，并将其赋值给变量data。为了实现这一点，您可以使用JSON.parse()函数来解析JSON字符串，然后提取所需的数据。

const parsedData = JSON.parse(event.data);
const content = JSON.parse(parsedData.content).content;
const data = content;

// 现在，您可以使用变量data来访问解析后的JSON数据

在上述代码中，我们首先使用JSON.parse(event.data)解析event.data，得到一个对象parsedData。然后，我们使用JSON.parse(parsedData.content)再次解析parsedData.content，以提取嵌套的JSON数据，并将其赋值给content变量。最后，我们将content赋值给data，以便您可以通过data访问解析后的JSON数据。

在Vue 3中，使用ref创建的响应式变量，要访问其值，需要通过.value属性来获取。所以在打印boxList1的值时，应该使用boxList1.value

加群联系作者vx：xiaoda0423

仓库地址：https://github.com/webVueBlog/WebGuideInterview