el-table-column 鼠标放置，弹窗样式不基于整个页面，不覆盖左侧目录栏，如何实现，具体的代码。

在Vue的Element UI库中，`el-table-column`通常用于创建表格列，并且默认情况下其单元格内容的鼠标悬停事件会触发一个简单的提示信息显示。如果你想要定制这个提示框的样式，不覆盖左侧的目录栏，你可以通过CSS调整样式以及使用自定义组件来实现。

首先，你需要阻止Element UI的默认提示并自定义一个`popover`组件，例如：

<template>
  <div class="custom-popover" @mouseenter="showPopover" @mouseleave="hidePopover">
    <el-popover v-model="showPopover" placement="bottom-end" :width="200" :append-to-body="false">
      <span slot="reference">{{ content }}</span>
      <div slot="popper" class="custom-content">
        <!-- 自定义内容 -->
        <p>{{ customContent }}</p>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      content: '',
      customContent: ''
    };
  },
  methods: {
    showPopover() {
      this.showPopover = true;
    },
    hidePopover() {
      this.showPopover = false;
    }
  }
};
</script>

<style scoped>
.custom-popover {
  position: relative;
  /* 添加必要的定位，比如相对于parent元素 */
}

.custom-content {
  background-color: white; /* 根据需要设置颜色 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* 设置阴影 */
  padding: 10px;
  width: 180px; /* 可调整宽度 */
  /* 添加其他必要的样式，如z-index等以确保不会覆盖左侧目录栏 */
}
</style>

这里关键点在于设置了`append-to-body="false"`，这意味着弹出层将不会附加到body上，而是直接放在`el-popover`的容器内，这样就可以避免覆盖其他元素。然后，你需要在需要的地方绑定这个自定义列：

<el-table-column
  prop="property"
  label="标题"
  :formatter="formatter"
/>

在`formatter`函数中注入自定义的`content`字段：

methods: {
  formatter(row) {
    return `<div @mouseenter="showPopover(row)" @mouseleave="hidePopover(row)">
               <span>${row.property}</span>
               <custom-popover :content="row.content" :customContent="row.customContent" />
             </div>`;
  }
},

注意这只是一个基本示例，实际应用中可能还需要根据项目需求进一步优化样式和功能。