vue.js - 如何在Element UI的el-tabs中实现联动滚动条和左右选择器？

Question

element-ui 中 el-tabs如何让它超出固定宽度显示滚动条+左右选择器

<div style="margin-bottom: 20px;">
  <el-button
    size="small"
    @click="addTab(editableTabsValue)"
  >
    add tab
  </el-button>
</div>
<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
  <el-tab-pane
    v-for="(item, index) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name"
  >
    {{item.content}}
  </el-tab-pane>
</el-tabs>
<script>
  export default {
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2
      }
    },
    methods: {
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
</script>
<style>
.el-tabs {
    width: 500px;
}
.el-tabs__nav-scroll {
    overflow-x: auto;
}
</style>

目前按照以上写法，会实现滚动条+左右选择器，但是滚动条和选择器不是联动效果。如果我点击选择器，展示到最后一个tab-pane，在滑动滚动条时，最后一个tab-pane后边会有一片白，并且滚动条无法滚动到第一个tab-pane

Answer 1

点击左右选择器滚动用的是 transform: translateX(？px)
兼容滚动条的话要自定义左右选择器或者 自定义滚动条-滚动条监听transform的数值
建议自定义左右选择器，用两个按钮控制滚动条位置就可以了