[附源码]VUE element ui前端实现菜单栏点击打开对应pdf/图片动态绑定等内容

用VUE element ui前端实现菜单栏点击打开对应pdf/图片动态绑定等内容，可直接运行

<template>
    <div class="purchaseAdd">
        <div class="container">
            <div class="navsBox">
                <ul>
                    <li v-for="(item,index) in items" :key="index" @click="chooseClick(index)" :class="{active:index==isActive}">
                        {{item.val}}
                    </li>
                </ul>
            </div>
            <div class="contentBox">
                <ul>
                    <li v-for="(item,index) in array" :key="index">
                        <iframe :src="item.val" class="iframe"></iframe>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isActive: 0,
                items:[
                    {
                        val:"文件1"
                    },{
                        val:"文件2"
                    },{
                        val:"文件3"
                    },{
                        val:"文件4"
                    },{
                        val:"文件5"
                    },{
                        val:"文件6"
                    },
                ],
                site:[
                    {
                        val:'开关面板内容1'
                    },{
                        val:'开关面板内容2'
                    },{
                        val:"开关面板内容3"
                    },{
                        val:"开关面板内容4"
                    },{
                        val:"开关面板内容5"
                    },{
                        val:"开关面板内容6"
                    },
                ],
                array:[]
            }
        },
        created() {
            // 默认会打开第一个
            this.array.push(this.site[0])
        },
        methods: {
            chooseClick(index) {
                this.array = [];
                this.isActive = index;
                this.array.push(this.site[index]);
            }
        }
    };
</script>

<style scoped lang="less">
//可根据需要自行定义
    .purchaseAdd{
        width: 98%;
        height: 99%;
        padding: 14px;
        background: #f0f2f5;
        .container{
            display: flex;
            height: 93%;
            width: 99%;
            padding: 16px;
            margin: 16px 0 0 0;
            background:#fff;
            .navsBox{
                cursor:pointer;
                background: #fff;
                width: 50px;
                font-size: 14px;
                text-align: center;
                color: #333;
                ul{
                    li{
                        padding:5px 0;
                        border-bottom: 1px #e0e0e0;
                        width: 40px;
                        &.active {
                            color: #1b65b9;
                        }
                    }
                }
            }
            .contentBox{
                padding: 2px;
                height: 95%;
                width: 98%;
            }
        }
    }
    .iframe {
        width: 100%;
        height: 95%;
    }
</style>

运行结果：