From 577e4dc17e6b3c4e77af7ba310e40d28d9b0a619 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 26 Oct 2017 14:21:21 +0800
Subject: [PATCH] refactor: case sensitive

---
 .../example/table/dynamicTable/fixedThead.vue | 58 +++++++++++++++++++
 .../example/table/dynamicTable/index.vue      | 19 ++++++
 .../table/dynamicTable/unfixedThead.vue       | 47 +++++++++++++++
 3 files changed, 124 insertions(+)
 create mode 100644 src/views/example/table/dynamicTable/fixedThead.vue
 create mode 100644 src/views/example/table/dynamicTable/index.vue
 create mode 100644 src/views/example/table/dynamicTable/unfixedThead.vue

diff --git a/src/views/example/table/dynamicTable/fixedThead.vue b/src/views/example/table/dynamicTable/fixedThead.vue
new file mode 100644
index 00000000..5c088490
--- /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 00000000..6182f0e7
--- /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 00000000..a5991326
--- /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>