背景

最近需要整合各种微服务组件，但大多数微服务组件没有界面或界面不符合需求，所以决定为微服务组件界面化或对已有界面进行更改，以达到统一的界面风格，为整体微服务系统提供一整套可视化服务

考虑因素

• 开发上手难度
• 如果需要进行前后端分离，迁移改造难度
• 与当前公司所用前端框架是否适配
• 是否有可以进行较好的调试（热更新、近实时更新）

解决方案

• 由于多数微服务组件是构建于 SpringBoot 之上，所有决定将界面放置于组件内部，当微服务组件启动后可直接进行访问
• 根据公司采用的前端框架是 vue（使用 nodeJs 单独启动的前端），鉴于未来迁移改造难度，界面也决定采用 vue 方案，只不过采用的是 html 文件引入 js 的方式
• 通过直接修改Idea编译后的target目录下的静态文件，可实现页面和样式的近实时更新

示例项目

Gitee开源项目地址 https://gitee.com/refiner/refine-boot-vue
采用 vue 版本：v2.6.10

特别说明：项目采用的是以静态文件的方式引入VUE，即使用 <script type="text/javascript" th:src="@{/js/vue.min.js}"></script> ，自身依赖Node环境，不属于前后端分离架构，但可在分离时进行无缝迁移

遇到的问题

问题描述:如下图所示，图片上的操作列可能不显示或表格后的分页组件不显示，通过F12查看源码，发现代码丢失

代码示例（官网上的代码）

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    ...
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

问题原因

Vue页面使用 <template> 标签来嵌套到 <router-view> 中从而展示页面，但是引用js的工程中使用如上代码方式会造成 <template> 嵌套，即 查看 和 编辑 操作也使用了 <template> 来渲染，所以造成元素编译后丢失

解决方案

• 已确定是因为 <template> 标签嵌套而导致渲染后元素丢失，所以只要 查看 和 编辑 操作改用不使用 <template> 来包括即可，经过试验，发现可以使用 <slot> 标签替代 <template> ，替换后渲染，不会造成元素编译后丢失

解决后代码示例

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    ...
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <slot slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </slot>
    </el-table-column>
  </el-table>
</template>