diff --git a/jero-web/src/views/demo/list/JTableList.vue b/jero-web/src/views/demo/list/JTableList.vue
new file mode 100644
index 00000000..a46cbc47
--- /dev/null
+++ b/jero-web/src/views/demo/list/JTableList.vue
@@ -0,0 +1,148 @@
+<template>
+  <a-card :bordered="false">
+    <div>
+      <div>
+        <a-button @click="clearCurrentCache(1)">清理表1缓存</a-button>
+        <a-button @click="clearCurrentCache(2)">清理表2缓存</a-button>
+        <a-button @click="clearJTableCache">清理全局缓存</a-button>
+      </div>
+      <j-table  bordered
+                :table-key="$route.name + '_table1'"
+                ref='table1'
+                rowKey='key'
+                tableLayout='fixed'
+                :scroll="{ x: 2000 }"
+                :data-source="dataSource"
+                :columns.sync="columns">
+
+        <span slot="action" slot-scope="{record}">
+          <a-popconfirm
+            v-if="dataSource.length"
+            title="Sure to delete?"
+            @confirm="() => onDelete(record.key)"
+          >
+          <a href="javascript:">Delete</a>
+        </a-popconfirm>
+        </span>
+
+      </j-table>
+
+      <j-table  bordered
+                :table-key="$route.name + '_table2'"
+                ref='table2'
+                rowKey='key'
+                tableLayout='fixed'
+                :scroll="{ x: 2000 }"
+                :data-source="dataSource"
+                :columns.sync="columns">
+
+        <span slot="action" slot-scope="{record}">
+          <a-popconfirm
+            v-if="dataSource.length"
+            title="Sure to delete?"
+            @confirm="() => onDelete(record.key)"
+          >
+          <a href="javascript:">Delete</a>
+        </a-popconfirm>
+        </span>
+
+      </j-table>
+    </div>
+
+  </a-card>
+</template>
+
+<script>
+import JTable from '@comp/jero/JTable'
+
+export default {
+  name: 'JTableList',
+  components: { JTable },
+  data () {
+    const columns = [
+      {
+        // 是否在配置表格中显示
+        // hideSettingColumn: true,
+        // 尽量要有minWidth，冻结列时会临时使用作为width
+        minWidth: 100,
+        // 禁用配置表格中的隐藏或冻结
+        // disabledHide: true,
+        // disabledFreeze: true,
+        title: '#',
+        ellipsis: true,
+        dataIndex: 'key',
+        fixed: true
+      },
+      {
+        title: 'Date',
+        dataIndex: 'date',
+        minWidth: 200
+      },
+      {
+        title: 'Amount',
+        dataIndex: 'amount',
+        minWidth: 100
+      },
+      {
+        title: 'Type',
+        dataIndex: 'type',
+        minWidth: 100
+      },
+      {
+        title: 'Note',
+        dataIndex: 'note',
+        minWidth: 100
+      },
+      {
+        title: 'Action',
+        key: 'action',
+        width: 200
+      }
+    ]
+    const dataSource = [
+      {
+        key: 0,
+        date: '2018-02-11',
+        amount: 120,
+        type: 'income',
+        note: 'transfer'
+      },
+      {
+        key: 1,
+        date: '2018-03-11',
+        amount: 243,
+        type: 'income',
+        note: 'transfer'
+      },
+      {
+        key: 2,
+        date: '2018-04-11',
+        amount: 98,
+        type: 'income',
+        note: 'transfer'
+      }
+    ]
+    return {
+      columns,
+      dataSource
+    }
+  },
+  methods: {
+    // 清除当前表格缓存
+    clearCurrentCache (n) {
+      this.$refs['table' + n].clearSetting()
+    },
+    // 清除所有缓存
+    clearJTableCache () {
+      this.$refs.table1.clearAllCacheSetting()
+    },
+    onDelete (key) {
+      this.$message.info(`del:${key}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>