[element-ui] el-tabs的标题使用el-dropdown

<el-tabs v-model="activeTab">
  <el-tab-pane>
    <template #label>
      <el-dropdown trigger="click" @command="handleDropdownCommand">
        <span class="dropdown-title">{{ dropdownTitle }}span>
        <i class="el-icon-arrow-down el-icon--right">i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="option1">Option 1el-dropdown-item>
          <el-dropdown-item command="option2">Option 2el-dropdown-item>
        el-dropdown-menu>
      el-dropdown>
    template>
    
  el-tab-pane>
el-tabs>
data() {
  return {
    activeTab: '0', // 当前激活的选项卡的索引
    dropdownTitle: 'Default Title' // 下拉标题
  };
},
methods: {
  handleDropdownCommand(command) {
    this.dropdownTitle = command; // 更换下拉标题为选中的选项
  }
}

你可能感兴趣的:(element-ui,vue.js,前端,javascript)