fix:fixed case-sensitive bug
This commit is contained in:
Pan
parent
925dbeb045
commit
df28ad7078
|
|
@ -1,64 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class='json-editor'>
|
|
||||||
<textarea ref='textarea'></textarea>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import CodeMirror from 'codemirror'
|
|
||||||
import 'codemirror/addon/lint/lint.css'
|
|
||||||
import 'codemirror/lib/codemirror.css'
|
|
||||||
import 'codemirror/theme/rubyblue.css'
|
|
||||||
require('script-loader!jsonlint')
|
|
||||||
import 'codemirror/mode/javascript/javascript'
|
|
||||||
import 'codemirror/addon/lint/lint'
|
|
||||||
import 'codemirror/addon/lint/json-lint'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'jsonEditor',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
jsonEditor: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: ['value'],
|
|
||||||
watch: {
|
|
||||||
value(value) {
|
|
||||||
const editor_value = this.jsonEditor.getValue()
|
|
||||||
if (value !== editor_value) {
|
|
||||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
|
||||||
lineNumbers: true,
|
|
||||||
mode: 'application/json',
|
|
||||||
gutters: ['CodeMirror-lint-markers'],
|
|
||||||
theme: 'rubyblue',
|
|
||||||
lint: true
|
|
||||||
})
|
|
||||||
|
|
||||||
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
|
|
||||||
this.jsonEditor.on('change', cm => {
|
|
||||||
this.$emit('changed', cm.getValue())
|
|
||||||
this.$emit('input', cm.getValue())
|
|
||||||
})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getValue() {
|
|
||||||
return this.jsonEditor.getValue()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.CodeMirror {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-editor .cm-s-rubyblue span.cm-string {
|
|
||||||
color: #F08047;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
|
|
||||||
<div class="filter-container">
|
|
||||||
<el-checkbox-group v-model="checkboxVal">
|
|
||||||
<el-checkbox label="apple">apple</el-checkbox>
|
|
||||||
<el-checkbox label="banana">banana</el-checkbox>
|
|
||||||
<el-checkbox label="orange">orange</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-table :data="tableData" :key='key' style="width: 100%">
|
|
||||||
<el-table-column prop="name" label="fruitName" width="180"></el-table-column>
|
|
||||||
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
|
|
||||||
<template scope="scope">
|
|
||||||
{{scope.row[fruit]}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const defaultFormThead = ['apple', 'banana'] // 默认选中项
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: 'fruit-1',
|
|
||||||
apple: 'apple-10',
|
|
||||||
banana: 'banana-10',
|
|
||||||
orange: 'orange-10'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'fruit-2',
|
|
||||||
apple: 'apple-20',
|
|
||||||
banana: 'banana-20',
|
|
||||||
orange: 'orange-20'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
key: 1, // table key
|
|
||||||
formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
|
|
||||||
checkboxVal: defaultFormThead, // checkboxVal
|
|
||||||
formThead: defaultFormThead // 默认表头
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
checkboxVal(valArr) {
|
|
||||||
this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
|
|
||||||
this.key = this.key + 1// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
<div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
|
|
||||||
<fixed-thead></fixed-thead>
|
|
||||||
|
|
||||||
<div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
|
|
||||||
<unfixed-thead></unfixed-thead>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import fixedThead from './fixedThead'
|
|
||||||
import unfixedThead from './unfixedThead'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { fixedThead, unfixedThead }
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="app-container">
|
|
||||||
|
|
||||||
<div class="filter-container">
|
|
||||||
<el-checkbox-group v-model="formThead">
|
|
||||||
<el-checkbox label="apple">apple</el-checkbox>
|
|
||||||
<el-checkbox label="banana">banana</el-checkbox>
|
|
||||||
<el-checkbox label="orange">orange</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<el-table :data="tableData" style="width: 100%">
|
|
||||||
<el-table-column prop="name" label="fruitName" width="180">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
|
|
||||||
<template scope="scope">
|
|
||||||
{{scope.row[fruit]}}
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableData: [
|
|
||||||
{
|
|
||||||
name: 'fruit-1',
|
|
||||||
apple: 'apple-10',
|
|
||||||
banana: 'banana-10',
|
|
||||||
orange: 'orange-10'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'fruit-2',
|
|
||||||
apple: 'apple-20',
|
|
||||||
banana: 'banana-20',
|
|
||||||
orange: 'orange-20'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
formThead: ['apple', 'banana']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Loading…
Reference in New Issue