script setup 头像import reactive toRefs from vue 修改个人信息import ElMessage ElMessageBox from element-plus 基本信息import computed ref from vueimport axios from axios;import userInfo from os;const state

修改template部分的代码如下：

<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-main class="main">
                    <div>
                        <div class="item">
                            <div class="block">
                                <el-avatar shape="square" :size="100" :src="squareUrl" />
                            </div>
                            <div :id="userInfo">
                                <!-- 在这里插入htmlStr -->
                                <div v-html="htmlStr"></div>
                            </div>
                        </div>
                    </div>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

然后在script setup部分的userInfo函数中添加对htmlStr的赋值：

// 获取当前用户个人信息
const userInfo = () => {
    const token = localStorage.getItem("token");

    axios.get('http://nn.nncoding.icu:8080/api/user/info', {
        headers: {
            token: token
        }
    })
        .then((response) => {
            console.log(response);
            // 将获取到的信息赋值给htmlStr
            state.htmlStr = `
            <el-descriptions class="margin-top" title="基本信息" :column="3" :size="size" border>
                                <template #extra>
                                    <el-button text @click="open" type="primary">修改</el-button>
                                </template>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon>
                                            用户名
                                        </div>
                                    </template>
                                    ${response.data.data.username}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <iphone />
                                            </el-icon>
                                            手机号
                                        </div>
                                    </template>
                                    ${response.data.data.phone}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Message />
                                            </el-icon>
                                            邮箱
                                        </div>
                                    </template>
                                    ${response.data.data.email}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Document />
                                            </el-icon>
                                            个人简介
                                        </div>
                                    </template>
                                    ${response.data.data.title}
                                </el-descriptions-item>
                            </el-descriptions>
            `;
        })
        .catch((error) => {
            console.error(error);
        });
};

这样就可以将获取到的个人信息赋值给htmlStr，并在模板中渲染出来