codeMirror自动补全(sql)元数据结构提示动态提示库下面的表名表下的字段名

樵得樵眼笑眉舒

于 2020-06-23 12:13:31 发布

阅读量1w

点赞数 4

分类专栏： codeMirror vue codemirror自动提示文章标签： vue 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45496202/article/details/106918970

版权

Vue中codeMirror自动补全(元数据库>表>字段联想提示)

参考文档(codeMirror使用说明说)
codeMirror官网
需求: 在输入sql时,可以根据元数据自动提示某个库下面所有的表和字段(例如: hive.table.field)当我输入hive. 会自动提示后面所有的table选项.往后同理.具体效果如下图
在这里插入图片描述

实现方法:

第一步,引入codeMirror 必须文件和自动提示插件

// 引入全局实例
import _CodeMirror from 'codemirror';

// 核心样式
import 'codemirror/lib/codemirror.css';
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/blackboard.css';
import 'codemirror/theme/cobalt.css';
import 'codemirror/addon/display/fullscreen.css'; // 全屏显示编辑器
import 'codemirror/addon/display/fullscreen.js'