el-tabs 重命名标签页

在 el-tabs 中，可以通过 `tab-label` 属性来自定义标签页的显示文本，例如：

<el-tabs>
  <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
  <el-tab-pane>
    <template v-slot:tab-label>
      <span>Tab 2</span>
      <el-button type="text" icon="el-icon-edit" @click="renameTab(1)"></el-button>
    </template>
    Content of Tab Pane 2
  </el-tab-pane>
</el-tabs>

上面的例子中，第二个标签页的显示文本为一个包含了文本和编辑按钮的组合，当用户点击编辑按钮时，会触发 `renameTab` 方法来更改标签页的名称。具体的实现方法可以参考以下代码：

export default {
  data() {
    return {
      tabNames: ['Tab 1', 'Tab 2', 'Tab 3'],
    };
  },
  methods: {
    renameTab(index) {
      this.$prompt('请输入新的标签页名称', '重命名标签页', {
        inputValue: this.tabNames[index],
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.tabNames.splice(index, 1, value);
      });
    },
  },
};

上面的代码中，我们通过 `this.$prompt` 方法弹出一个对话框来输入新的标签页名称，然后使用 `splice` 方法来更新 `tabNames` 数组中对应的元素。最后，我们只需要将 `tabNames` 数组中的元素与标签页的 `label` 属性绑定即可。