左侧插入目录

try {
  this.$ajax({
    url: 'datacenter/apiData/dataList',
    data: { "filter": {}, "page": 1, "limit": 100, "source_id": 593 },
  }).then((res) => {
    // 检查样式是否已存在，避免重复添加
    if (!document.getElementById('aside-styles')) {
      const style = document.createElement('style');
      style.id = 'aside-styles';
      style.textContent = `
        .el-aside ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .el-aside li {
          background-color: #f8f9fa;
          color: #333;
          padding: 12px 20px;
          margin: 4px 0;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s ease;
          font-family: 'Segoe UI', 'PingFang SC', sans-serif;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .el-aside li:hover {
          background-color: #409eff;
          color: white;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }
        .el-aside li.active {
          background-color: #409eff !important;
          color: white !important;
          font-weight: 500;
          position: relative;
        }
      `;
      document.head.appendChild(style);
    }
    if (res.code) return;
    const data = res.data.rows;
    const tdCard = document.querySelector('.td_card');
    if (!tdCard) return;
    // 移除已存在的列表（避免重复添加）
    const existingList = document.querySelector('.el-aside');
    if (existingList) existingList.remove();
    // 创建列表容器
    const asideList = document.createElement('div');
    asideList.className = 'el-aside';
    asideList.style.width = '200px';
    asideList.style.float = 'left';
    // 添加列表标题
    const title = document.createElement('h3');
    title.textContent = '问题分类';
    title.style.padding = '10px 20px';
    title.style.margin = '0';
    title.style.borderBottom = '1px solid #eee';
    asideList.appendChild(title);
    // 生成列表项
    const ul = document.createElement('ul');
    data.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item.d8;
      li.dataset.id = item.id;
      li.dataset.d8 = item.d8;
      li.dataset.item = JSON.stringify(item);
      ul.appendChild(li);
    });
    asideList.appendChild(ul);
    tdCard.insertAdjacentElement('afterbegin', asideList);

    // 点击处理函数（添加选中状态）
    const handleItemClick = (item, clickedLi) => {
      // 移除所有active类
      document.querySelectorAll('.el-aside li').forEach(li => {
        li.classList.remove('active');
      });
      // 添加active类到当前选中项
      clickedLi.classList.add('active');
      // 设置筛选条件
      this.dataJson.searchData.filter.d8 = item.d8;
      this.dataJson.searchData.filter.d8_OP = '=';
      this.refreshTableData();
    };
    // 事件委托处理点击
    asideList.addEventListener('click', (event) => {
      const li = event.target.closest('li');
      if (li) {
        const itemData = JSON.parse(li.dataset.item);
        handleItemClick(itemData, li);
      }
    });
  });
} catch (e) {
  console.error('侧边栏数据加载失败:', e);
}