低开开发笔记(七): 换引擎，点击跳转模板样式

好家伙，

 

完整代码已开源

https://github.com/Fattiger4399/ph-questionnaire.git

 

1.思路

现在，我们的需求是，点击对应的模板，更换对应的模板数据

 

 

 2.上代码

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    :default-openeds="openeds" @select="handleMenuItemClick">
                    <el-submenu index="0">
                        <template slot="title">
                            <i class="el-icon-monitor" style="color: #409EFF ;font-size: 30px;padding-right: 13px;"></i>
                            <span>工作台</span>
                        </template>
                    </el-submenu>
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-question"
                                style="color: #409EFF ;font-size: 30px;padding-right: 13px;"></i>
                            <span>问卷模板</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">
                                分组一</template>

                            <el-menu-item index="1-1">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    饮食偏好调查问卷
                                </template>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    学业完成情况调查问卷
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location" style="color: brown ;font-size: 30px;padding-right: 13px;"></i>
                            <span>订单模板</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">
                                分组一</template>

                            <el-menu-item index="2-1">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    汽车销售订单
                                </template>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    文具销售订单
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-document"
                                style="color: #409EFF ;font-size: 30px;padding-right: 15px;"></i>
                            <span>报表模板</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">
                                分组一</template>

                            <el-menu-item index="3-1">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    公司财务统计报表
                                </template>
                            </el-menu-item>
                            <el-menu-item index="3-2">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    耗材报销模板
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

 

对于饿了么组件的el-menu，是可以直接使用

<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    :default-openeds="openeds" @select="handleMenuItemClick">

@select来获取

<el-menu-item index="1-1">
                                <template>
                                    <i class="el-icon-edit"></i>
                                    饮食偏好调查问卷
                                </template>
                            </el-menu-item>

el-menu-item中的index

 

目录结构

handleMenuItemClick

 handleMenuItemClick(index) {
            const map =require('./examplejson/map.js')
            let __dirname = './examplejson/'
            let path = map.default[index]
            const jsonData = require(`${__dirname + path}`);
            this.formTemplate = jsonData
        },

 

在这里我们做一个简单的映射表

let map = {
    '1-1': 'DietaryhabitsSouth',
};

这样，就可以实现点击对应项，导入对应的json