【Element-UI-Tabs 标签页-后面加按钮】

Element-UI-Tabs 标签页-后面加按钮

效果如图所示：

代码实现如下：

<el-tabs v-model="activeName" type="border-card" :before-leave="beforeLeave">
    <el-tab-pane name="first">
        <span slot="label" ><i class="el-icon-date"></i> 个人信息</span>
        个人信息
    </el-tab-pane>
    <el-tab-pane name="second">
        <span slot="label"><i class="el-icon-date"></i> 更改手机号</span>
        更改手机号
    </el-tab-pane>
    <el-tab-pane name="third">
        <span slot="label"><i class="el-icon-date"></i> 修改密码</span>
        修改密码
    </el-tab-pane>
    <el-tab-pane name="fourth">
        <span slot="label"><i class="el-icon-date"></i> 人脸识别</span>
        人脸识别
    </el-tab-pane>
    <el-tab-pane name="CustoBtn">
        <span slot="label"><el-link type="primary" :underline="false">完善信息</el-link></span>
    </el-tab-pane>
</el-tabs>

export default {
    data() {
        return {
             activeName: 'first'
        }
    },
    methods: {
        beforeLeave(tabName) {
            if(tabName== "CustoBtn") {
                return false;
            }
        },
    },
}