类似汽车参数对比界面VUE

<template>
  <div class="comparison_box">
    <div class="comparison_left">
      <div class="system_list">
        <ul>
          <li
            v-for="(item, index) in systemList"
            :key="index"
            :class="{ li_active: index === selectVal }"
            @click="selectSystem(index)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div ref="comparisonRight" class="comparison_right" @scroll="handleScroll">
      <!-- 顶部固定列 -->
      <div class="comparison_top">
        <div class="comparison_top_title">
          <el-popover
            ref="popover"
            placement="bottom"
            width="400"
            trigger="click"
            @show="selectBoxVal=''"
          >
            <el-select v-model="selectBoxVal" filterable placeholder="请选择" @change="bacthChange">
              <el-option
                v-for="item in comboxList"
                :key="item.value"
                :label="`${item.value}（${item.name}）`"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button slot="reference" icon="el-icon-plus"></el-button>
          </el-popover>

          <div class="text">添加对比</div>
        </div>
        <div class="comparison_top_list">
          <draggable :list="navList" class="drag-area" @end="onDragEnd">
            <div
              v-for="(item, index) in navList"
              :key="index"
              class="list_details"
              :class="{ list_details_active: index === 0 && isDing }"
            >
              <div class="fixed_tag">
                <span
                  v-if="index === 0 && isDing"
                  class="tag_close"
                  @click="cancelDing(index)"
                >
                  已钉住
                </span>
                <span v-else class="tag" @click="dingHandle(index)">
                  钉在左侧
                </span>
                <i
                  v-if="navList.length > 1"
                  class="el-icon-close"
                  @click="moveItemUp(index)"
                ></i>
              </div>
              <div class="craft_name">{{ item.name }}</div>
            </div>
          </draggable>
        </div>
      </div>
      <div ref="scrollContainer" class="table_list">
        <div
          v-for="(item, index) in systemList"
          :ref="'anchor-' + index"
          :key="index"
          class="panel-item anchor-item"
        >
          <div class="panel-item-title">
            <div class="title" :style="{borderRight: navList.length>0?'':'1px solid #2c91ff'}">{{ item.name }}</div>
            <div class="panel-item_list">
              <div
                v-for="(list, i) in navList"
                :key="i"
                class="list_item"
                :class="{ list_item_active: i === 0 && isDing }"
              ></div>
            </div>
          </div>
          <div v-for="(main, j) in item.list" :key="j" class="nav_box">
            <div class="nav_left">
              <div>{{ main.title }}</div>
            </div>
            <div class="nav_right">
              <div
                v-for="(nav, idx) in navList"
                :key="idx"
                class="nav_list"
                :class="{ nav_list_active: idx === 0 && isDing }"
              >
                {{ nav[main.id] }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div v-if="showBackTop" class="back_top">
        <el-button
          type="primary"
          icon="el-icon-caret-top"
          circle
          @click="scrollToTop"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data () {
    return {
      input3: '',
      selectVal: 0,
      selectBoxVal: '',
      popVis: false,
      showBackTop: false, // 是否显示返回顶部
      isDing: false, // 是否钉住
      systemList: [
        {
        name: '车型1',
        list: [
          {
            id: 'xitong1',
            title: '转动轴1'
          },

          {
            id: 'xitong2',
            title: '转动轴2'
          },
          {
            id: 'xitong3',
            title: '转动轴3'
          },
          {
            id: 'xitong4',
            title: '转动轴4'
          },
          {
            id: 'xitong5',
            title: '转动轴5'
          },
          {
            id: 'xitong6',
            title: '转动轴6'
          }
        ]
      },
      { name: '车型2' },
      { name: '车型3' },
      { name: '车型4' },
      { name: '车型5' },
      { name: '车型6' },
      { name: '车型7' },
      { name: '车型8' },
      { name: '车型9' },
      { name: '车型10' },
      { name: '车型11' }
      ],
      navList: [
         {
          name: '工艺参数1',
          xitong1: '10',
          xitong2: '65',
          xitong3: '1',
          xitong4: '30',
          xitong6: '40',
          xitong5: '50'
        },
      ],
      comboxList: [
        {
          value: '111',
          name: '车型'
        }
      ]

    }
  },
  mounted () {
    this.initPkData()
  },
  methods: {
    dingHandle (index) {
      this.isDing = true
      this.navList.splice(0, 0, this.navList.splice(index, 1)[0])
    },
    cancelDing () {
      this.isDing = false
    },
    onDragEnd (event) {
      // 拖拽结束后的处理逻辑
    },
    selectSystem (val) {
      this.$nextTick(() => {
        this.selectVal = val
        const selector = 'anchor-' + val
        this.$refs[selector][0].scrollIntoView({ behavior: 'instant', block: 'end', inline: 'nearest' }) 
      })
    },
    scrollToTop () {
      this.$nextTick(() => {
        this.selectSystem(0)
      })
    },
    moveItemUp (index) {
      this.navList.splice(index, 1)
    },
    plusClick() {
      this.$refs.popover.doShow()
    },
    initPkData() {
      this.navList = []
      //初始化systemList comboxList数据
    },
    bacthChange(val) {
      if (val) {
        this.$refs.popover.doClose()
        //组装navList数据
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.comparison_box {
  display: flex;
  width: 100%;
  height: calc(100vh - 320px);
  .comparison_left {
    width: 140px;
    height: 100%;
    background:  #173a5e;
    border-radius: 5px;
    flex-shrink: 0;
    overflow: hidden;
    .system_list {
      height: calc(100% - 40px);
      ul {
        height: 100%;
        overflow: auto;
        padding: 0 8px;
        li {
          list-style: none;
          padding: 8px 6px 8px 12px;
          font-size: 14px;
          border-radius: 6px;
          cursor: pointer;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          background:linear-gradient(10deg, #021E3A 0%, #094AA4 50%, #021E3A 100%);
          color: #FFFFFF;
          &:hover {
            background: #1359b9;
          }
        }
        li+li{
          margin-top: 10px;
        }
        .li_active {
          color: #F5A623;
          background: #1359b9
        }
      }
    }
  }
  .comparison_right {
    background:  #173a5e;
    width: calc(100% - 140px);
    margin-left: 12px;
    overflow: auto;
    color:#FFFFFF;
    .comparison_top {
      height: 100px;
      position: sticky;
      top: 0;
      z-index: 10;
      background:  #173a5e;
      display: flex;
      .comparison_top_title {
        width: 160px;
        height: 100%;
        border: 1px solid #2c91ff;
        position: sticky;
        left: 0;
        flex-shrink: 0;
        background:  #173a5e;
        z-index: 8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .text {
          font-size: 12px;
          margin-top: 4px;
        }
      }
      .comparison_top_list {
        display: flex;
        .drag-area {
          display: flex;
        }
        .list_details {
          width: 200px;
          height: 100%;
          border: 1px solid #2c91ff;
          border-left: none;
          background:  #173a5e;
          position: relative;
          .fixed_tag {
            display: flex;
            justify-content: space-between;
            .tag {
              background-color: rgba(255, 204, 50, 0.7);
              border-bottom-right-radius: 24px;
              padding: 4px 20px 4px 6px;
              font-size: 12px;
              color: rgb(17, 15, 10);

              cursor: pointer;
            }
            .tag_close {
              background-color: #919193;
              border-bottom-right-radius: 24px;
              padding: 4px 20px 4px 6px;
              color: rgba(31, 33, 41);
              font-size: 12px;
              cursor: pointer;
            }
            > i {
              font-size: 12px;
              color: #FFFFFF;
              margin-right: 4px;
              margin-top: 4px;
              cursor: pointer;
            }
          }
          .craft_name {
            margin-top: 16px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
          }
        }
        .list_details_active {
          position: sticky;
          left: 160px;
          z-index: 6;
        }
      }
    }
    .table_list {
      height: 100%;
      .panel-item {
        display: flex;
        flex-direction: column;
        margin-top: 1px;
        .panel-item-title {
          height: 36px;
          display: flex;
          align-items: center;
          .title {
            width: 144px;
            height: 100%;
            line-height: 36px;
            position: sticky;
            left: 0;
            padding-left: 16px;
            font-size: 14px;
            font-weight: 600;
            background: #185c9e;
            color:#F5A623;
            border-bottom: 1px solid #2c91ff;
            border-left: 1px solid #2c91ff;
            flex-shrink: 0;
          }
          .panel-item_list {
            height: 100%;
            display: flex;
            .list_item {
              width: 201px;
              height: 100%;
              background: #185c9e;
              border-bottom: 1px solid #2c91ff;
            }
            .list_item:last-child {
              border-right: 1px solid #2c91ff;
            }
            .list_item_active {
              position: sticky;
              left: 160px;
            }
          }
        }
        .nav_box {
          display: flex;
          height: 32px;
          .nav_left {
            height: 100%;
            position: sticky;
            left: 0;
            border: 1px solid #2c91ff;
            border-top: none;
            width: 144px;
            line-height: 32px;
            padding-left: 16px;
            color: #FFFFFF;
            flex-shrink: 0;
            z-index: 8;
            font-size: 14px;
          }
          .nav_right {
            display: flex;
            height: 100%;
            .nav_list {
              width: 184px;
              height: 100%;
              flex-shrink: 0;
              border: 1px solid #2c91ff;
              border-top: none;
              border-left: none;
              line-height: 32px;
              padding-left: 16px;
              font-size: 14px;
            }
            .nav_list_active {
              position: sticky;
              left: 160px;
            }
          }
        }
      }
    }
    .back_top {
      position: fixed;
      bottom: 50px;
      right: 60px;
    }
  }
}
</style>