|
1 |
npm install --dev @typescript-eslint/parser |
然后.eslintrc.js中
|
1 2 3 4 5 |
module.exports = { parserOptions: { parser: "@typescript-eslint/parser", } } |
element-ui 表格控制列显隐简单方案
核心是使用v-if控制列的显隐
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<template> <div> <div v-for="(item, index) in tables" :key="index"> <el-table :data="item.data" @filter-change="value => filterChange(value,index, 'tables')" :span-method="value => cellMerge(value,'tables')" :header-cell-style="{background:'#fbfbfb'}" size="mini" doLayout border > <el-table-column v-for="(ele,index) in item.columns" :label="ele.text" :prop="ele.value" show-overflow-tooltip v-if="ele.flag" :key="ele.value + index" :resizable="false" > <template slot-scope="scope"> <span>{{scope.row[scope.column.property]}}</span> </template> </el-table-column> <el-table-column :key="item.columns.length + 1" fixed="right" width="50" v-if="item.stash_columns" :filters="item.stash_columns" :filtered-value="item.filter_value" :resizable="false" > <template slot="header" slot-scope="scope"> <i class="el-icon-menu" style="cursor: pointer"></i> </template> </el-table-column> </el-table> </div> </div> </template> <script> export default { data () { return { tables: [ { data: [], columns: [ { text: '滴滴', value: 'didi', flag: true }, { text: '哒哒', value: 'dada', flag: true }, { text: '嘿嘿', value: 'heihei', flag: true }, { text: '哈哈', value: 'haha', flag: false } ] } ] } }, methods: { // 处理数据 handlerData (type) { const data = [{didi: '11', dada: '22', heihei: '33', haha: '44'}] const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { this.$set(this[type][index], 'data', data) this.$set(this[type][index], 'stash_columns', item.columns) this.$set(this[type][index], 'filter_value', []) const columns = item.stash_columns const filter_value = item.filter_value columns && columns.length > 0 && columns.map((ele, idx) => { if (ele.flag) { filter_value.push(ele.value) } }) this.$set(this[type][index], 'filter_value', filter_value) }) }, // 控制列显隐 filterChange (value, idx, type) { switch (type) { case type: for (const ele in value) { this.$set(this[type][idx], 'show_columns', value[ele]) } const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const columns = item.columns const show_columns = item.show_columns if (show_columns && show_columns.length > 0) { columns && columns.length > 0 && columns.map((val, key) => { this.$set(this[type][index].columns[key], 'flag', false) show_columns.map((ele) => { if (val.value === ele) { this.$set(this[type][index].columns[key], 'flag', true) } }) }) } }) break default: break } }, // 合并单元格 cellMerge ({row, column, rowIndex, columnIndex}, type) { this.$nextTick(() => { const tables = this[type] tables && tables.length > 0 && tables.map((item, index) => { const show_columns = item.show_columns const length = show_columns && show_columns.length > 0 ? show_columns.length : item.columns.length if (columnIndex === length - 1) { return [1, 0] } else if (columnIndex === length) { return [0, 0] } }) }) } }, mounted () { this.handlerData('tables') } } </script> |
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js)
npm i node-sass –sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
Superset导航栏高亮问题处理
在superset => templates => appbuilder 文件夹下找到 navbar.html 如果没有可对应新建，navbar.html内容如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
{% set menu = appbuilder.menu %} {% set languages = appbuilder.languages %} {% set WARNING_MSG = appbuilder.app.config.get('WARNING_MSG') %} {% set app_icon_width = appbuilder.app.config.get('APP_ICON_WIDTH', 126) %} {% set logo_target_path = appbuilder.app.config.get('LOGO_TARGET_PATH') or '/profile/{}/'.format(current_user.username) %} <div class="navbar navbar-static-top {{ menu.extra_classes }}" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="{{ '/superset' + logo_target_path if current_user.username is defined else '#' }}"> <img width="{{ app_icon_width }}" src="{{ appbuilder.app_icon }}" alt="{{ appbuilder.app_name }}" /> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> {% if WARNING_MSG %} <li class="alert alert-danger"> {{ WARNING_MSG | safe }} </li> {% endif %} {% include 'appbuilder/navbar_menu.html' %} </ul> <ul class="nav navbar-nav navbar-right"> {% include 'appbuilder/navbar_right.html' %} </ul> </div> </div> </div> <script> // Highlight the navbar menu const menus = document.querySelectorAll('.nav.navbar-nav li') for (const menu of menus.values()) { const menuParent = menu.parentNode && menu.parentNode.parentNode const parentClasses = menuParent.getAttribute('class') const classes = menu.getAttribute('class') const as = menu.querySelectorAll('a') for (const a of as.values()) { const href = a.getAttribute('href') let path = location.pathname if (path.indexOf(href) > -1) { menu.setAttribute('class', `${classes} active`) if (parentClasses.indexOf('dropdown') > -1) { menuParent.setAttribute('class', `${parentClasses} active`) } else { menuParent.setAttribute('class', `${parentClasses}`) } } else { menu.setAttribute('class', `${classes}`) } } } </script> |
AceEditor在safari下光标错位问题
修复方法：
|
1 2 3 |
.ace_editor { font: 12px/normal 'Menlo', 'Monaco', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important; } |
JavaScript设计模式样例二十二 —— 访问者模式
访问者模式(Visitor Pattern)
|
1 2 3 |
定义：使用一个访问者类，改变元素类的执行算法。通过这种方式，元素的执行算法可以随着访问者改变而改变。 目的：将数据结构与数据操作分离。 场景：您在朋友家做客，您是访问者，朋友接受您的访问，您通过朋友的描述，然后对朋友的描述做出一个判断，这就是访问者模式。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// 元素类 class Elements { constructor () { this.action = () => { console.log('hi～') } this.accept = (visitor) => { visitor.visit(this) } } } // 访问者 class Visitor { constructor () { this.visit = (elements) => { elements.action() } } } const ele = new Elements() const visi = new Visitor() ele.accept(visi) |
所谓人世，无非人与事
这世界，纷纷绕绕，总是如此。
JavaScript设计模式样例二十一 —— 解释器模式
解释器模式(Interpreter Pattern)
|
1 2 3 |
定义：提供了评估语言的语法或表达式的方式。 目的：对于一些固定文法构建一个解释句子的解释器。 场景：编译器、运算表达式计算。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// 定义对于语法的断言 class TerminalExpression { constructor (data) { this.data = data } interpret (context) { if (context.indexOf(this.data) > -1) { return true } return false } } // 添加表达式判断符 class OrExpression { constructor(expr1, expr2) { this.expr1 = expr1; this.expr2 = expr2; } interpret(context) { return this.expr1.interpret(context) || this.expr2.interpret(context); } } class AndExpression { constructor(expr1, expr2) { this.expr1 = expr1; this.expr2 = expr2; } interpret(context) { return this.expr1.interpret(context) && this.expr2.interpret(context); } } // 获取对应表达式 function getMaleExpression(){ const robert = new TerminalExpression("Robert"); const john = new TerminalExpression("John"); return new OrExpression(robert, john); } function getMarriedWomanExpression(){ const julie = new TerminalExpression("Julie"); const married = new TerminalExpression("Married"); return new AndExpression(julie, married); } // 判断语句断言 const isMale = getMaleExpression(); const isMarriedWoman = getMarriedWomanExpression(); console.log("John is male? " + isMale.interpret("John")); console.log("Julie is a married women? " ) |
JavaScript设计模式样例二十 —— 中介者模式
中介者模式(Mediator Pattern)
|
1 2 3 |
定义：用来降低多个对象和类之间的通信复杂性。 目的：用一个中介对象来封装一系列的对象交互，中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 场景：MVC框架中的控制器C就是模型M和识图V的中介者。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
let mediator = (() => { let msg = {} return { register: (type, action) => { if (!msg[type]) msg[type] = [] msg[type].push(action) }, send: (type) => { if (msg[type]) { for (let i = 0; i < msg[type].length; i++) { msg[type][i] && msg[type][i]() } } } } })() mediator.register('demo', () => { console.log('first') }) mediator.register('demo', () => { console.log('second') }) mediator.send('demo') |
Github地址：https://github.com/skillnull/Design-Mode-Example[……]
JavaScript设计模式样例十九 —— 职责链模式
职责链模式(Chain of Responsibility Pattern)
|
1 2 3 |
定义：为请求创建了一个接收者对象的链。 目的：避免请求发送者与接收者耦合在一起，让多个对象都有可能接收请求，将这些对象连接成一条链，并且沿着这条链传递请求，直到有对象处理它为止。 场景：红楼梦中的"击鼓传花"。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
// 采购请求 let PurchaseRequest = (amount, productName) => { this.amount = amount this.productName = productName } // 处理方 let Approver = (name, nextApprover) => { this.name = name this.nextApprover = nextApprover } Approver.prototype.processRequest = () => { throw new Error() } // ConcreteHandler let Manager = (name, nextApprover) => { Approver.call(this, name, nextApprover) } extend(Manager, Approver) Manager.prototype.processRequest = (request) => { if (request.Amount < 10000.0) { console.log('ok') } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } // ConcreteHandler,副总 let VicePresident = function (name, nextApprover) { Approver.call(this, name, nextApprover) } extend(VicePresident, Approver); VicePresident.prototype.processRequest = function (request) { if (request.Amount < 25000.0) { console.log('ok'); } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } // ConcreteHandler，总经理 let President = function (name, nextApprover) { Approver.call(this, name, nextApprover) } extend(President, Approver) President.prototype.processRequest = function (request) { if (request.Amount < 100000.0) { console.log('ok') } else if (NextApprover != null) { this.nextApprover.ProcessRequest(request) } } let requestTelphone = new PurchaseRequest(4000.0, "Telphone") let requestSoftware = new PurchaseRequest(10000.0, "Visual Studio") let requestComputers = new PurchaseRequest(40000.0, "Computers") let manager = new Manager("LearningHard") let Vp = new VicePresident("Tony") let Pre = new President("BossTom") // 设置责任链 manager.NextApprover = Vp Vp.NextApprover = Pre // 处理请求 manager.ProcessRequest(requestTelphone) manager.ProcessRequest(requestSoftware) manager.ProcessRequest(requestComputers) |