|  |  | 
 |  |  |           <el-menu-item-group> | 
 |  |  |             <el-menu-item index="3-1">话术库</el-menu-item> | 
 |  |  |             <el-menu-item index="3-2">意图管理</el-menu-item> | 
 |  |  |             <el-menu-item index="3-3">模版库</el-menu-item> | 
 |  |  |             <el-menu-item index="3-3">模板库</el-menu-item> | 
 |  |  |           </el-menu-item-group> | 
 |  |  |           <!-- <el-submenu index="1-4"> | 
 |  |  |             <template slot="title">选项4</template> | 
 |  |  | 
 |  |  |             :label="item.title" | 
 |  |  |             :name="item.name" | 
 |  |  |           > | 
 |  |  |             {{ item.content }} | 
 |  |  |             <!-- {{ item.content }} --> | 
 |  |  |             <div class="leftvalu-code" v-if="editableTabs.length"> | 
 |  |  |               <el-tabs | 
 |  |  |                 v-model="fiactiveName" | 
 |  |  |                 type="card" | 
 |  |  |                 @tab-click="handleClick" | 
 |  |  |               > | 
 |  |  |                 <el-tab-pane | 
 |  |  |                   v-if="item.content == 0 || item.content == 3" | 
 |  |  |                   label="代码展示" | 
 |  |  |                   name="first" | 
 |  |  |                   ><codemirror | 
 |  |  |                     v-model="item.value" | 
 |  |  |                     :options="options" | 
 |  |  |                   ></codemirror | 
 |  |  |                 ></el-tab-pane> | 
 |  |  |                 <el-tab-pane | 
 |  |  |                   v-if="item.content == 1 || item.content == 3" | 
 |  |  |                   label="表格展示" | 
 |  |  |                   name="second" | 
 |  |  |                   ><el-table :data="tableData" style="width: 100%"> | 
 |  |  |                     <el-table-column prop="date" label="日期" width="180"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column prop="name" label="姓名" | 
 |  |  |           width="100" > | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column prop="address" label="地址"> | 
 |  |  |                     </el-table-column> </el-table | 
 |  |  |                 ></el-tab-pane> | 
 |  |  |               </el-tabs> | 
 |  |  |             </div> | 
 |  |  |           </el-tab-pane> | 
 |  |  |         </el-tabs> | 
 |  |  |       </div> | 
 |  |  | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | // import { codemirror } from "vue-codemirror"; | 
 |  |  | export default { | 
 |  |  |   name: "education", | 
 |  |  |  | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       code: "", | 
 |  |  |       fiactiveName: "first", | 
 |  |  |       options: { | 
 |  |  |         line: true, | 
 |  |  |         theme: "rubyblue", // 主题 | 
 |  |  |         tabSize: 4, // 制表符的宽度 | 
 |  |  |         indentUnit: 2, // 一个块应该缩进多少个空格(无论这在编辑语言中意味着什么)。默认值为 2。 | 
 |  |  |         firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。 | 
 |  |  |         readOnly: false, // 只读 | 
 |  |  |         autorefresh: true, | 
 |  |  |         smartIndent: true, // 上下文缩进 | 
 |  |  |         lineNumbers: true, // 是否显示行号 | 
 |  |  |         styleActiveLine: true, // 高亮选中行 | 
 |  |  |         viewportMargin: Infinity, //处理高度自适应时搭配使用 | 
 |  |  |         showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标 | 
 |  |  |         mode: "javascript", | 
 |  |  |       }, | 
 |  |  |       tableData: [ | 
 |  |  |         { | 
 |  |  |           date: "2016-05-02", | 
 |  |  |           name: "王小虎", | 
 |  |  |           address: "上海市普陀区金沙江路 1518 弄", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           date: "2016-05-04", | 
 |  |  |           name: "王小虎", | 
 |  |  |           address: "上海市普陀区金沙江路 1517 弄", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           date: "2016-05-01", | 
 |  |  |           name: "王小虎", | 
 |  |  |           address: "上海市普陀区金沙江路 1519 弄", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           date: "2016-05-03", | 
 |  |  |           name: "王小虎", | 
 |  |  |           address: "上海市普陀区金沙江路 1516 弄", | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |  | 
 |  |  |       editableTabsValue: "2-2-3", | 
 |  |  |       editableTabslist: [ | 
 |  |  |         { | 
 |  |  |           title: "患者管理", | 
 |  |  |           name: "1-1", | 
 |  |  |           content: "Tab 1 content", | 
 |  |  |           content: 0, | 
 |  |  |           value: "<el-tab-pane>", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "宣教管理", | 
 |  |  |           name: "2-1", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: 1, | 
 |  |  |           value: | 
 |  |  |             "<el-table-column prop='address' label='地址'></el-table-column>", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "问卷管理", | 
 |  |  |           name: "2-2", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: 3, | 
 |  |  |           value: | 
 |  |  |             "<el-table-column prop='address' label='地址'></el-table-column>", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "题库管理", | 
 |  |  |           name: "2-3", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: "", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "话术库", | 
 |  |  |           name: "3-1", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: "", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "意图管理", | 
 |  |  |           name: "3-2", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: "", | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "模板库", | 
 |  |  |           name: "3-3", | 
 |  |  |           content: "Tab 2 content", | 
 |  |  |           content: "", | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |       // 需要的树的格式 | 
 |  |  |       editableTabslisat: [ | 
 |  |  |         { | 
 |  |  |           title: "患者管理", | 
 |  |  |           name: "1", | 
 |  |  |           son: [ | 
 |  |  |             { | 
 |  |  |               title: "患者管理", | 
 |  |  |               name: "1-1", | 
 |  |  |               content: "", | 
 |  |  |             }, | 
 |  |  |           ], | 
 |  |  |         }, | 
 |  |  |         { | 
 |  |  |           title: "知识库", | 
 |  |  |           name: "2", | 
 |  |  |           son: [ | 
 |  |  |             { | 
 |  |  |               title: "宣教管理", | 
 |  |  |               name: "2-1", | 
 |  |  |               content: "", | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |               title: "问卷管理", | 
 |  |  |               name: "2-2", | 
 |  |  |               content: "", | 
 |  |  |             }, | 
 |  |  |             { | 
 |  |  |               title: "题库管理", | 
 |  |  |               name: "2-3", | 
 |  |  |               content: "", | 
 |  |  |               son: [ | 
 |  |  |                 { title: "政策管理", name: "2-3-1", content: "" }, | 
 |  |  |                 { title: "治安管理", name: "2-3-2", content: "" }, | 
 |  |  |               ], | 
 |  |  |             }, | 
 |  |  |           ], | 
 |  |  |         }, | 
 |  |  |       ], | 
 |  |  |       editableTabs: [], | 
 |  |  | 
 |  |  | .educationmanagement { | 
 |  |  |   display: flex; | 
 |  |  | } | 
 |  |  | .leftvalu-code { | 
 |  |  |   // background: #3a3d42; | 
 |  |  |   height: 300px; | 
 |  |  |   ::v-deep.CodeMirror { | 
 |  |  |     position: relative; | 
 |  |  |     overflow: hidden; | 
 |  |  |     // background: #3a3d42; | 
 |  |  |     color: #3a92ef; | 
 |  |  |     font-size: 20px; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | .sidecolumn { | 
 |  |  |   width: 300px; | 
 |  |  |   min-height: 100vh; | 
 |  |  | 
 |  |  |     display: center !important; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .qrcode-dialo { | 
 |  |  |   text-align: center; | 
 |  |  |   //   display: flex; |