diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dcb5ee2d632a682a3d41aec535ac6aa60022cf6c
--- /dev/null
+++ b/src/components/JsonEditor/index.vue
@@ -0,0 +1,64 @@
+<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>
diff --git a/src/views/example/table/dynamicTable/fixedThead.vue b/src/views/example/table/dynamicTable/fixedThead.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5c08849030214fda205ba17091989b28e23cad70
--- /dev/null
+++ b/src/views/example/table/dynamicTable/fixedThead.vue
@@ -0,0 +1,58 @@
+<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>
+
diff --git a/src/views/example/table/dynamicTable/index.vue b/src/views/example/table/dynamicTable/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6182f0e718fe8dd4cf55c19285bc2a331a7ae896
--- /dev/null
+++ b/src/views/example/table/dynamicTable/index.vue
@@ -0,0 +1,19 @@
+<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>
+
diff --git a/src/views/example/table/dynamicTable/unfixedThead.vue b/src/views/example/table/dynamicTable/unfixedThead.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5991326c59f10551e71f33cb72d6083999109e3
--- /dev/null
+++ b/src/views/example/table/dynamicTable/unfixedThead.vue
@@ -0,0 +1,47 @@
+<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>