├── CHANGELOG.md
├── .gitignore
├── 20190429-161829.png
├── .npmignore
├── src
    ├── index.js
    ├── table-column.vue
    ├── table-cell.js
    ├── table-row.vue
    ├── table-column-header.vue
    ├── table-header.vue
    ├── table-content.vue
    └── table.vue
├── example
    ├── index.js
    ├── index.html
    └── example.vue
├── .eslintrc
├── webpack.example.config.js
├── webpack.config.js
├── package.json
├── index.html
├── README.CN.md
├── README.md
└── dist
    └── index.js


/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 | 
3 | ### Features
4 | 
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | coverage
4 | .idea
5 | .jshintrc
6 | *.log


--------------------------------------------------------------------------------
/20190429-161829.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cherislive/vue-snb-table/HEAD/20190429-161829.png


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | coverage
4 | .idea
5 | .jshintrc
6 | webpack.config.js
7 | webpack.base.js
8 | webpack.example.config.js


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import SnbTable from './table.vue';
2 | import SnbTableColumn from './table-column.vue';
3 | import SnbTableHeader from './table-header.vue';
4 | export {
5 |   SnbTable,
6 |   SnbTableColumn,
7 |   SnbTableHeader
8 | };


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import hljs from 'highlight.js';
 3 | import Example from './example.vue';
 4 | Vue.directive('highlight',function (el) {
 5 |   let blocks = el.querySelectorAll('pre code');  
 6 |   blocks.forEach((block)=>{
 7 |     hljs.highlightBlock(block);
 8 |   });
 9 | });
10 | new Vue({
11 |   el: '#app',
12 |   render: h => h(Example)
13 | });
14 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | parserOptions:
 2 |   sourceType: module
 3 | 
 4 | env:
 5 |   es6: true
 6 |   browser: true
 7 | 
 8 | extends:
 9 | - 'eslint:recommended'
10 | - 'plugin:vue/essential'
11 | 
12 | rules:
13 |   quotes: [ 1, single ]
14 |   linebreak-style: [ 1, unix ]
15 |   semi: [ 1, always ]
16 |   no-undef: [ 1 ]
17 |   no-console: [ 0 ]
18 |   no-unused-vars: [ 1 ]
19 |   space-infix-ops: [ 1 ]
20 |   no-multi-spaces: [ 1 ]
21 |   no-fallthrough: [ 0 ]
22 | 


--------------------------------------------------------------------------------
/webpack.example.config.js:
--------------------------------------------------------------------------------
 1 | const {resolve} = require('path');
 2 | const options = require('./webpack.config');
 3 | 
 4 | options.mode = 'development';
 5 | options.entry = './example/';
 6 | 
 7 | options.output.filename = 'example.js';
 8 | options.output.libraryTarget = 'var';
 9 | options.output.publicPath = '/dist/';
10 | 
11 | options.devServer = {
12 |   contentBase: [
13 |     resolve(__dirname, "example"),
14 |   ],
15 |   publicPath: '/dist/'
16 | };
17 | 
18 | module.exports = options;
19 | 
20 | 


--------------------------------------------------------------------------------
/src/table-column.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div v-if="false">
 3 |   <slot></slot>
 4 | </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   props: {
 9 |     prop: { default: null, type: String },
10 |     label: { default: null, type: String },
11 |     align: { default: null, type: String },
12 |     width: { default: null, type: String },
13 |     sortable: { default: false, type: Boolean },
14 |     fixed: { default: false, type: Boolean },
15 |     formatter: { default: v => v, type: Function },
16 |   },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/table-cell.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   functional: true,
 3 |   props: ['column', 'row', 'colspan'],
 4 |   render(createElement, { props }) {
 5 |     const column = props.column;
 6 |     const data = {};
 7 |     data.class = 'cell';
 8 |     if (column.$scopedSlots.default) {
 9 |       return createElement('div', data, column.$scopedSlots.default(props.row));
10 |     }
11 |     data.domProps = {};
12 |     data.domProps.innerHTML = props.column.formatter(props.row[column.prop], props.row.data);
13 |     return createElement('div', data);
14 |   },
15 | };
16 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const ExtractTextPlugin = require('./node_modules/extract-text-webpack-plugin/dist/cjs')
 3 | 
 4 | module.exports = {
 5 |   mode: 'production',
 6 |   entry: {
 7 |     'index': './src/index.js',
 8 |     'example': './example/index.js',
 9 |   },
10 |   output: {
11 |     path: path.resolve(__dirname, 'dist'),
12 |     library: 'VueSnbTable',
13 |     libraryTarget: 'umd',
14 |     filename: '[name].js',
15 |   },
16 |   module: {
17 |     rules: [
18 |       {
19 |         enforce: 'pre',
20 |         test: /\.(js|vue)$/,
21 |         loader: 'eslint-loader',
22 |         exclude: /node_modules/
23 |       },
24 |       {
25 |         test: /\.vue$/,
26 |         loader: 'vue-loader',
27 |         // options: {
28 |         //   extractCSS: false
29 |         // }
30 |       },
31 |       { test: /\.js$/,
32 |         loader: 'babel-loader'
33 |       }
34 |     ]
35 |   },
36 |   plugins: [
37 |     new ExtractTextPlugin('[name].css'),
38 |   ]
39 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-snb-table",
 3 |   "version": "2.6.6",
 4 |   "description": "Display multiple data with similar format. You can sort your data in a table.",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --config ./webpack.example.config.js --inline --hot",
 8 |     "remote-dev": "npm run dev --host",
 9 |     "build": "rm -rf dist && webpack -p",
10 |     "release": "npm publish",
11 |     "prepare": "npm run build"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/cherislive/vue-snb-table.git"
16 |   },
17 |   "babel": {
18 |     "presets": [
19 |       "env"
20 |     ]
21 |   },
22 |   "files": [
23 |     "dist",
24 |     "src"
25 |   ],
26 |   "keywords": [
27 |     "table",
28 |     "ui-table",
29 |     "vue"
30 |   ],
31 |   "author": "i@cheris.cn",
32 |   "license": "MIT",
33 |   "devDependencies": {
34 |     "babel-core": "^6.26.0",
35 |     "babel-loader": "^7.1.4",
36 |     "babel-preset-env": "^1.6.1",
37 |     "css-loader": "^0.28.11",
38 |     "eslint": "^4.19.1",
39 |     "eslint-loader": "^2.0.0",
40 |     "eslint-plugin-vue": "^4.4.0",
41 |     "extract-text-webpack-plugin": "4.0.0-beta.0",
42 |     "style-loader": "^0.20.3",
43 |     "stylus": "^0.54.5",
44 |     "stylus-loader": "^3.0.2",
45 |     "vue": "2.5.16",
46 |     "vue-loader": "^14.2.2",
47 |     "vue-template-compiler": "2.5.16",
48 |     "webpack": "^4.29.6",
49 |     "webpack-cli": "^3.1.1",
50 |     "webpack-dev-server": "^3.1.3"
51 |   },
52 |   "dependencies": {
53 |     "highlight.js": "^9.15.6",
54 |     "lodash": "^4.17.11"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/table-row.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <tr ref="tableTrWrapper">
 3 |   <td 
 4 |     v-for="(column, index) in columns" 
 5 |     :key="column.type" 
 6 |     :class="[
 7 |       'table-column', 
 8 |       column.align ? `is-${column.align}`: '',
 9 |       index === 0 ? 'first-table-column' : '', 
10 |       index === columns.length - 1 ? 'last-table-column' : '',
11 |     ]" 
12 |     :style="minWidth(column.width)"
13 |     @click="rowClick"
14 |   >
15 |     <TableCell
16 |       :colspan="index"
17 |       :row="row"
18 |       :column="column"
19 |     ></TableCell>
20 |   </td>
21 | </tr>
22 | </template>
23 | 
24 | <script>
25 | import TableCell from './table-cell';
26 | export default {
27 |   name: 'snb-table-row',
28 |   components: {
29 |     TableCell,
30 |   },
31 |   props: {
32 |     columns: {
33 |       type: Array,
34 |       default: () => []
35 |     },
36 |     row: {
37 |       type: Object,
38 |       default: () => {}
39 |     },
40 |     isLastRow: {
41 |       type: Boolean,
42 |       default: false
43 |     },
44 |   },
45 |   data () {
46 |     return {
47 |     };
48 |   },
49 |   computed: {
50 |   },
51 |   created() {
52 |   },
53 |   mounted () {
54 |     this.getCellsWidth();
55 |   },
56 |   methods: {
57 |     getCellsWidth () {
58 |       if (!this.isLastRow) return;
59 |       this.$nextTick(() => {
60 |         const _colWidth = [];
61 |         let _childDomArr = this.$refs.tableTrWrapper.querySelectorAll('.table-column');
62 |         for (let i = 0; i < _childDomArr.length; i++) {
63 |           _colWidth.push(_childDomArr[i].offsetWidth);
64 |         }
65 |         this.$emit('colsWidth', _colWidth);
66 |       });
67 |     },
68 |     minWidth (width) {
69 |       if (width) {
70 |         return { 'min-width': `${width}px` };
71 |       }
72 |     },
73 |     rowClick () {
74 |       this.$emit('rowClick', this.row);
75 |     }
76 |   },
77 |   watch: {
78 |     columns () {
79 |       if (!this.isLastRow) return;
80 |       this.getCellsWidth(); // 获取列宽度
81 |     }
82 |   }
83 | };
84 | </script>
85 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
 7 |   <meta name='apple-mobile-web-app-capable' content='yes' />
 8 |   <meta name='full-screen' content='true' />
 9 |   <meta name='x5-fullscreen' content='true' />
10 |   <meta name='360-fullscreen' content='true' />
11 |   <meta name="theme-color" content="#6282fb" />
12 |   <title>vue-snb-table examples</title>
13 |   <style>
14 |   *{margin:0; padding:0}  
15 | /*
16 | Atom One Dark by Daniel Gamage
17 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
18 | base: #282c34
19 | mono-1: #abb2bf
20 | mono-2: #818896
21 | mono-3: #5c6370
22 | hue-1: #56b6c2
23 | hue-2: #61aeee
24 | hue-3: #c678dd
25 | hue-4: #98c379
26 | hue-5: #e06c75
27 | hue-5-2: #be5046
28 | hue-6: #d19a66
29 | hue-6-2: #e6c07b*/.hljs{display: block;overflow-x: auto;padding: 0.5em;color: #abb2bf;background: #282c34;}
30 | .hljs-comment,
31 | .hljs-quote{color: #5c6370;font-style: italic;}
32 | .hljs-doctag,
33 | .hljs-keyword,
34 | .hljs-formula{color: #c678dd;}
35 | .hljs-section,
36 | .hljs-name,
37 | .hljs-selector-tag,
38 | .hljs-deletion,
39 | .hljs-subst{color: #e06c75;}
40 | .hljs-literal{color: #56b6c2;}
41 | .hljs-string,
42 | .hljs-regexp,
43 | .hljs-addition,
44 | .hljs-attribute,
45 | .hljs-meta-string{color: #98c379;}
46 | .hljs-built_in,
47 | .hljs-class .hljs-title{color: #e6c07b;}
48 | .hljs-attr,
49 | .hljs-variable,
50 | .hljs-template-variable,
51 | .hljs-type,
52 | .hljs-selector-class,
53 | .hljs-selector-attr,
54 | .hljs-selector-pseudo,
55 | .hljs-number{color: #d19a66;}
56 | .hljs-symbol,
57 | .hljs-bullet,
58 | .hljs-link,
59 | .hljs-meta,
60 | .hljs-selector-id,
61 | .hljs-title{color: #61aeee;}
62 | .hljs-emphasis{font-style: italic;}
63 | .hljs-strong{font-weight: bold;}
64 | .hljs-link{text-decoration: underline;}
65 |   </style>
66 | </head>
67 | <body>
68 | <div id="app"></div>
69 | <script type="text/javascript" src="./dist/example.js"></script>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
 7 |   <meta name='apple-mobile-web-app-capable' content='yes' />
 8 |   <meta name='full-screen' content='true' />
 9 |   <meta name='x5-fullscreen' content='true' />
10 |   <meta name='360-fullscreen' content='true' />
11 |   <meta name="theme-color" content="#6282fb" />
12 |   <title>vue-snb-table examples</title>
13 |   <style>
14 |   *{margin:0; padding:0}  
15 | /*
16 | Atom One Dark by Daniel Gamage
17 | Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
18 | base: #282c34
19 | mono-1: #abb2bf
20 | mono-2: #818896
21 | mono-3: #5c6370
22 | hue-1: #56b6c2
23 | hue-2: #61aeee
24 | hue-3: #c678dd
25 | hue-4: #98c379
26 | hue-5: #e06c75
27 | hue-5-2: #be5046
28 | hue-6: #d19a66
29 | hue-6-2: #e6c07b*/.hljs{display: block;overflow-x: auto;padding: 0.5em;color: #abb2bf;background: #282c34;}
30 | .hljs-comment,
31 | .hljs-quote{color: #5c6370;font-style: italic;}
32 | .hljs-doctag,
33 | .hljs-keyword,
34 | .hljs-formula{color: #c678dd;}
35 | .hljs-section,
36 | .hljs-name,
37 | .hljs-selector-tag,
38 | .hljs-deletion,
39 | .hljs-subst{color: #e06c75;}
40 | .hljs-literal{color: #56b6c2;}
41 | .hljs-string,
42 | .hljs-regexp,
43 | .hljs-addition,
44 | .hljs-attribute,
45 | .hljs-meta-string{color: #98c379;}
46 | .hljs-built_in,
47 | .hljs-class .hljs-title{color: #e6c07b;}
48 | .hljs-attr,
49 | .hljs-variable,
50 | .hljs-template-variable,
51 | .hljs-type,
52 | .hljs-selector-class,
53 | .hljs-selector-attr,
54 | .hljs-selector-pseudo,
55 | .hljs-number{color: #d19a66;}
56 | .hljs-symbol,
57 | .hljs-bullet,
58 | .hljs-link,
59 | .hljs-meta,
60 | .hljs-selector-id,
61 | .hljs-title{color: #61aeee;}
62 | .hljs-emphasis{font-style: italic;}
63 | .hljs-strong{font-weight: bold;}
64 | .hljs-link{text-decoration: underline;}
65 |   </style>
66 | </head>
67 | <body>
68 | <div id="app"></div>
69 | <script type="text/javascript" src="/dist/example.js"></script>
70 | </body>
71 | </html>
72 | 


--------------------------------------------------------------------------------
/src/table-column-header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <th :class="[  
 3 |   column.align ? `is-${column.align}`: '',
 4 |   isAscending ? 'ascending' : '',
 5 |   isDescending ? 'descending' : '',
 6 | ]" ref="elColumn"
 7 |   @click="handleClick"
 8 | >
 9 |   <div class="cell">{{column.label}} <span class="caret-wrapper" v-if="isSortCell"><i class="sort-caret ascending"></i><i class="sort-caret descending"></i></span></div>  
10 | </th>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'snb-table-column-header',
16 |   props: {
17 |     column: {
18 |       type: Object,
19 |       default: () => {}
20 |     },
21 |     sort: {
22 |       type: Object,
23 |       default: () => {}
24 |     },
25 |     // isFixedCell: {
26 |     //   type: Boolean,
27 |     //   default: false
28 |     // },
29 |   },
30 |   data () {
31 |     return {
32 |     };
33 |   },
34 |   computed: {
35 |     isSortCell () {
36 |       if (!this.sort) return false;
37 |       return this.column.sortable || 
38 |         this.sort.prop === this.column.prop ||         
39 |         this.sort.defaultProp === this.column.prop;
40 |     },
41 |     isAscending () {
42 |       return this.sort && this.sort.prop === this.column.prop && this.sort.order === 'asc';
43 |     },
44 |     isDescending () {
45 |       return this.sort && this.sort.prop === this.column.prop && this.sort.order === 'desc';
46 |     }
47 |   },
48 |   created() {
49 |   },
50 |   mounted () {
51 |   },
52 |   methods: {
53 |     handleClick () {
54 |       if (this.isSortCell) {
55 |         this.$emit('handleHeadSortClick', this.column);
56 |       }
57 |     }
58 |   }
59 | };
60 | </script>
61 | <style lang="stylus">
62 | .caret-wrapper
63 |   position relative
64 |   display inline-flex
65 |   flex-direction column
66 |   align-items center
67 |   width 12px
68 |   height 22px
69 |   vertical-align middle
70 |   overflow hidden
71 | .sort-caret
72 |   position absolute
73 |   left 1px
74 |   width 0
75 |   height 0
76 |   border 5px solid transparent
77 |   &.ascending
78 |     border-bottom-color #c0c4cc
79 |     top 0px
80 |   &.descending
81 |     border-top-color #c0c4cc
82 |     bottom 0px
83 | th.ascending
84 |   .sort-caret
85 |     &.ascending
86 |       border-bottom-color #f75b5b
87 | th.descending
88 |   .sort-caret
89 |     &.descending
90 |       border-top-color #6282fb
91 | </style>


--------------------------------------------------------------------------------
/src/table-header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="ui-snb-table">
  3 |   <div class="table-fixed">
  4 |     <table-content class="table-top"
  5 |       contentType="header"
  6 |       :panes="columns"
  7 |       :sort="sort"
  8 |       :colsWidth="colsWidth"
  9 |       :distanX="distanX"
 10 | 
 11 |       @headerColsWidth="setHeaderColsWidth"
 12 |       @handleHeadSortClick="handleHeadSortClick"
 13 |     />
 14 |     <table-content class="table-fixed-left"  v-if="hasFixedCell"
 15 |       contentType="leftFixed"
 16 |       :showHeader="true"
 17 |       :panes="columns"
 18 |       :sort="sort"
 19 |       :colsWidth="colsWidth"
 20 |       :distanX="distanX"
 21 | 
 22 |       @handleHeadSortClick="handleHeadSortClick"
 23 |       :style="{
 24 |         width: leftColumnWidth + 'px'
 25 |       }"
 26 |     />
 27 |   </div>
 28 | </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import TableContent from './table-content.vue';
 33 | export default {
 34 |   name: 'snb-table-header',
 35 |   components: {
 36 |     TableContent,
 37 |   },
 38 |   props: {
 39 |     columns: { // 各个列属性
 40 |       type: Array,
 41 |       default: () => [],
 42 |     },
 43 |     colsWidth: { // 表格各列宽度
 44 |       type: Array,
 45 |       default: () => [],
 46 |     },
 47 |     distanX: { // table移动位置
 48 |       type: Number,
 49 |       default: 0,
 50 |     },
 51 |     defaultSort: { // 默认排序 由于涉及到数据分页这里只显示 不对数据进行排序处理
 52 |       type: Object,
 53 |       default: () => {}
 54 |     },
 55 |     sortState: { // 手动排序
 56 |       type: Object,
 57 |       default: () => {}
 58 |     },
 59 |   },
 60 |   data () {
 61 |     return {
 62 |       hasFixedCell: false, // 是否存在固定列
 63 |       tableWrapperWidth: 0, // 表格实际宽度
 64 |       sort: {
 65 |         prop: '',
 66 |         order: '',
 67 |         defaultProp: ''
 68 |       },
 69 |       rows: [],
 70 |       panes: [],
 71 |     };
 72 |   },
 73 |   computed: {
 74 |     // 固定列宽度
 75 |     leftColumnWidth () {
 76 |       if (!this.colsWidth.length) {
 77 |         return 0;
 78 |       }
 79 |       return this.colsWidth[0] * 1 || 0;
 80 |     },
 81 |   },
 82 |   created() {
 83 |     this.sort.prop = this.defaultSort ? this.defaultSort.prop : '';
 84 |     this.sort.order = this.defaultSort ? this.defaultSort.order : '';
 85 |     this.sort.defaultProp = this.defaultSort ? this.defaultSort.prop : '';
 86 |   },
 87 |   mounted () {
 88 |     this.reductionColumns(this.columns);
 89 |   },
 90 |   methods: {
 91 |     // 表头数据整理 是否存在固定列
 92 |     reductionColumns (columns = []) {
 93 |       let _columns = [];
 94 |       let fixedCell = null;
 95 |       if (columns && columns.length) {
 96 |         columns.map(item => {
 97 |           if (item.fixed && !fixedCell) {
 98 |             fixedCell = item || {};
 99 |           } else {
100 |             _columns.push(item);            
101 |           }
102 |         });
103 |         if (fixedCell) {
104 |           _columns.unshift(fixedCell);
105 |         }
106 |       }
107 |       this.hasFixedCell = !!fixedCell;
108 |     },
109 |     // 数据排序
110 |     handleHeadSortClick (column) {
111 |       if (this.sort.prop !== column.prop) {
112 |         this.sort.prop = column.prop;
113 |         this.sort.order = 'desc';
114 |       } else {
115 |         this.sort.order = this.sort.order || 'desc';
116 |       }
117 |       this.$emit('sortChange', this.sort);
118 |     },
119 |     // 设置全列宽
120 |     setHeaderColsWidth (widths = []) {
121 |       this.$emit('headerColsWidth', widths);
122 |     },
123 |   },
124 |   watch: {
125 |     // 是否存在固定列
126 |     columns (columns) {
127 |       this.reductionColumns(columns);
128 |     },
129 |     // 定义排序显示状态
130 |     sortState (sort = {}) {
131 |       this.sort.order = sort.order || this.defaultSort.order || '';
132 |     }
133 |   }
134 | };
135 | </script>
136 | <style lang="stylus">
137 | .ui-snb-table
138 |   position relative
139 |   width 100%
140 |   overflow hidden
141 |   .table-fixed
142 |     .table-fixed-top
143 |       position absolute
144 |       left 0
145 |       top 0
146 |       z-index 8
147 |       overflow hidden
148 |       width 100%
149 |       
150 |     .table-fixed-left
151 |       position absolute
152 |       left 0
153 |       top 0
154 |       z-index 9
155 |       overflow hidden
156 |       &.in-fixed-table
157 |         box-shadow 0 0 5px rgba(0,0,0,.12)
158 |   .hidden-columns
159 |     display none
160 |   th,td
161 |     margin 0
162 |     padding 0   
163 |     white-space nowrap
164 |     border 1px solid #ccc
165 |     text-align left
166 |     .cell
167 |       padding 10px 5px    
168 |   tbody
169 |     th, td
170 |       background #fff    
171 |   thead
172 |     th, td
173 |       background #f5f7fa
174 |   .is-left
175 |     text-align left
176 |   .is-right
177 |     text-align right 
178 |   .is-center
179 |     text-align center 
180 | </style>
181 | 


--------------------------------------------------------------------------------
/README.CN.md:
--------------------------------------------------------------------------------
  1 | [English](./README.md) | 简体中文
  2 | 
  3 | # vue-snb-table Table 表格
  4 | 
  5 | Table 表格. 用于展示多条结构类似的数据，可对数据进行排序操作。
  6 | 
  7 | [![GitHub stars](https://img.shields.io/github/stars/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/stargazers)
  8 | [![Build Status](https://travis-ci.org/cherislive/vue-snb-table.svg?branch=master)](https://travis-ci.org/cherislive/vue-snb-table)
  9 | [![GitHub issues](https://img.shields.io/github/issues/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/issues)
 10 | [![GitHub forks](https://img.shields.io/github/forks/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/network)
 11 | [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table)
 12 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table)
 13 | [![NPM](https://nodei.co/npm/vue-snb-table.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-snb-table/)
 14 | [![NPM](https://nodei.co/npm-dl/vue-snb-table.png?months=9&height=3)](https://nodei.co/npm/vue-snb-table/)
 15 | 
 16 | 
 17 | 
 18 | ## 预览
 19 | 
 20 | ![https://cherislive.github.io/projrct/vue-snb-table/](./20190429-161829.png)
 21 | 
 22 | 页面预览: [https://cherislive.github.io/projrct/vue-snb-table/](https://cherislive.github.io/projrct/vue-snb-table/)
 23 | 
 24 | ## 安装
 25 | 
 26 | ```bash
 27 | $ npm install vue-snb-table
 28 | ```
 29 | 
 30 | ## Import
 31 | 
 32 | ### Import using module
 33 | 
 34 | Import components to your project:
 35 | 
 36 | ``` js
 37 | // in ES6 modules
 38 | import { SnbTable, SnbTableColumn, SnbTableHeader } from 'vue-snb-table';
 39 | 
 40 | // in CommonJS
 41 | const { SnbTable, SnbTableColumn, SnbTableHeader } = require('vue-snb-table');
 42 | 
 43 | // in Global variable
 44 | const { SnbTable, SnbTableColumn, SnbTableHeader } = VueSnbTable;
 45 | ```
 46 | 
 47 | And register components:
 48 | 
 49 | ``` js
 50 | Vue.component('snb-table', SnbTable);
 51 | Vue.component('snb-table-column', SnbTableColumn);
 52 | Vue.component('snb-table-header', SnbTableHeader);
 53 | ```
 54 | 
 55 | ### Import using script tag
 56 | 
 57 | ``` html
 58 | <script src="../node-modules/vue-snb-table/dist/index.js"></script>
 59 | ```
 60 | 
 61 | ``` js
 62 | const SnbTable = VueSnbTable.SnbTable;
 63 | const SnbTableColumn = VueSnbTable.SnbTableColumn;
 64 | const SnbTableHeader = VueSnbTable.SnbTableHeader;
 65 | 
 66 | new Vue({
 67 |   el: 'body',
 68 |   components: {
 69 |     'snb-table': SnbTable,
 70 |     'snb-table-column': SnbTableColumn,
 71 |     'snb-table-header': SnbTableHeader
 72 |   }
 73 | });
 74 | ```
 75 | 
 76 | ## Usage
 77 | 
 78 | Work on a Vue instance:
 79 | 
 80 | ```HTML
 81 | <SnbTableHeader
 82 |   :columns="columns" 
 83 |   :colsWidth="colsWidth" 
 84 | />
 85 | <snb-table>
 86 |   <snb-table-column prop="data1" label="data1" />
 87 |   <snb-table-column prop="data2" label="data2" />
 88 |   <snb-table-column prop="data3" label="data3">
 89 |     <template slot-scope="scope">{{scope.data3}}</template>
 90 |   </snb-table-column>
 91 | </snb-table>
 92 | ```
 93 | ## Table
 94 | 
 95 | ### Attributes
 96 | 
 97 | | Option | Type | Description | Accepted Values | Default |
 98 | | ----- | ----- | ----- | ----- | ----- |
 99 | | data | Array | 显示的数据。 | - | - |
100 | | showHeader | Boolean | 是否显示表头。 | - | true |
101 | | headerFixed | Object | 固定表头。 | `state`: true/false | null |
102 | | defaultSort | Object | 默认的排序列的 `prop` 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序 | `order`: asc, desc | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是**ascending** |
103 | | sortState | Object | 可以通过该属性设置排序列的 `prop` 和顺序。它的`prop`属性指定排序的列，`order`指定默认排序的顺序 | `order`: asc, desc | - |
104 | | headerColsWidth | Array | 表头各个列宽。 | -  | - |
105 | 
106 | ### Events
107 | 
108 | | Event Name | Description | params |
109 | | ----- | ----- | ----- |
110 | | columnsReady | 当表格的列的数据状态加载完成的时候会触发该事件，该事件用于自定义表头的情况。 | columns |
111 | | sortChange | 当表格的排序条件发生变化的时候会触发该事件。 | {sort: {prop, order}, column} |
112 | | colsWidth | 当表格的数据发生变化的时候会触发该事件，返回各个列宽。 | widths |
113 | | distanXChange | 当拖动表格横向滚动的时候会触发该事件。 | width |
114 | | rowClick | 当某一行被点击时会触发该事件。| row |
115 | 
116 | ## Table-column
117 | 
118 | ### Attributes
119 | 
120 | | Option | Type | Description | Accepted Values | Default |
121 | | ----- | ----- | ----- | ----- | ----- |
122 | | prop | String | 对应列内容的字段名，也可以使用 property 属性。 | -  | - |
123 | | label | String | 显示的标题。 | -  | - |
124 | | align | String | 对齐方式。 | left/center/right | left |
125 | | width | String | 对应列的宽度。 | -  | - |
126 | | fixed | String | 列是否固定在左侧。 | true, false | false |
127 | | sortable | Boolean | 对应列是否可以排序。 | true, false | false |
128 | | formatter | Function(row, column, cellValue, index)	 | 用来格式化内容。 | - | - |
129 | 
130 | ## Table-header
131 | 
132 | ### Attributes
133 | 
134 | | Option | Type | Description | Accepted Values | Default |
135 | | ----- | ----- | ----- | ----- | ----- |
136 | | columns | Array | 各个列属性。 | -  | - |
137 | | colsWidth | Array | 各个列宽。 | -  | - |
138 | | distanX | Number | 表格横向滚动的距离。 | left/center/right | left |
139 | | defaultSort | Object | 默认的排序列的 `prop` 和顺序。它的`prop`属性指定默认的排序的列，`order`指定默认排序的顺序 | `order`: asc, desc | 如果只指定了`prop`, 没有指定`order`, 则默认顺序是ascending |
140 | | sortState | Object | 可以通过该属性设置排序列的 `prop` 和顺序。它的`prop`属性指定排序的列，`order`指定默认排序的顺序 | `order`: asc, desc | - |
141 | 
142 | ### Events
143 | 
144 | | Event Name | Description | params |
145 | | ----- | ----- | ----- |
146 | | sortChange | 当表格的排序条件发生变化的时候会触发该事件。 | {sort: {prop, order}, column} |
147 | | headerColsWidth | 表头各个列宽。当表格的渲染完成的时候会触发该事件。 | widths |
148 | 
149 | ## Development
150 | 
151 | Watching with hot-reload:
152 | 
153 | ```bash
154 | $ npm run dev
155 | ```
156 | 
157 | Develop on real remote device:
158 | 
159 | ```bash
160 | $ npm run remote-dev {{ YOUR IP ADDRESS }}
161 | ```
162 | 
163 | ## License
164 | 
165 | MIT
166 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | English | [简体中文](./README.CN.md)
  2 | 
  3 | # vue-snb-table
  4 | 
  5 | vue-snb-table is a table componen for Vue.js.
  6 | Display multiple data with similar format. You can sort your data in a table.
  7 | 
  8 | [![GitHub stars](https://img.shields.io/github/stars/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/stargazers)
  9 | [![Build Status](https://travis-ci.org/cherislive/vue-snb-table.svg?branch=master)](https://travis-ci.org/cherislive/vue-snb-table)
 10 | [![GitHub issues](https://img.shields.io/github/issues/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/issues)
 11 | [![GitHub forks](https://img.shields.io/github/forks/cherislive/vue-snb-table.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table/network)
 12 | [![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table)
 13 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/cherislive/vue-snb-table)
 14 | [![NPM](https://nodei.co/npm/vue-snb-table.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-snb-table/)
 15 | [![NPM](https://nodei.co/npm-dl/vue-snb-table.png?months=9&height=3)](https://nodei.co/npm/vue-snb-table/)
 16 | 
 17 | 
 18 | 
 19 | ## Demo
 20 | 
 21 | ![https://cherislive.github.io/projrct/vue-snb-table/](./20190429-161829.png)
 22 | 
 23 | You can see a demo here: [https://cherislive.github.io/projrct/vue-snb-table/](https://cherislive.github.io/projrct/vue-snb-table/)
 24 | 
 25 | 
 26 | ## Install
 27 | 
 28 | ```bash
 29 | $ npm install vue-snb-table
 30 | ```
 31 | 
 32 | ## Import
 33 | 
 34 | ### Import using module
 35 | 
 36 | Import components to your project:
 37 | 
 38 | ``` js
 39 | // in ES6 modules
 40 | import { SnbTable, SnbTableColumn, SnbTableHeader } from 'vue-snb-table';
 41 | 
 42 | // in CommonJS
 43 | const { SnbTable, SnbTableColumn, SnbTableHeader } = require('vue-snb-table');
 44 | 
 45 | // in Global variable
 46 | const { SnbTable, SnbTableColumn, SnbTableHeader } = VueSnbTable;
 47 | ```
 48 | 
 49 | And register components:
 50 | 
 51 | ``` js
 52 | Vue.component('snb-table', SnbTable);
 53 | Vue.component('snb-table-column', SnbTableColumn);
 54 | Vue.component('snb-table-header', SnbTableHeader);
 55 | ```
 56 | 
 57 | ### Import using script tag
 58 | 
 59 | ``` html
 60 | <script src="../node-modules/vue-snb-table/dist/index.js"></script>
 61 | ```
 62 | 
 63 | ``` js
 64 | const SnbTable = VueSnbTable.SnbTable;
 65 | const SnbTableColumn = VueSnbTable.SnbTableColumn;
 66 | const SnbTableHeader = VueSnbTable.SnbTableHeader;
 67 | 
 68 | new Vue({
 69 |   el: 'body',
 70 |   components: {
 71 |     'snb-table': SnbTable,
 72 |     'snb-table-column': SnbTableColumn,
 73 |     'snb-table-header': SnbTableHeader
 74 |   }
 75 | });
 76 | ```
 77 | 
 78 | ## Usage
 79 | 
 80 | Work on a Vue instance:
 81 | 
 82 | ```HTML
 83 | <SnbTableHeader
 84 |   :columns="columns" 
 85 |   :colsWidth="colsWidth" 
 86 | />
 87 | <snb-table>
 88 |   <snb-table-column prop="data1" label="data1" />
 89 |   <snb-table-column prop="data2" label="data2" />
 90 |   <snb-table-column prop="data3" label="data3">
 91 |     <template slot-scope="scope">{{scope.data3}}</template>
 92 |   </snb-table-column>
 93 | </snb-table>
 94 | ```
 95 | ## Table
 96 | 
 97 | ### Attributes
 98 | 
 99 | | Option | Type | Description | Accepted Values | Default |
100 | | ----- | ----- | ----- | ----- | ----- |
101 | | data | Array | Table data | - | - |
102 | | showHeader | Boolean | whether Table header is visible | - | true |
103 | | headerFixed | Object | whether Table header is fixed | `state`: true/false | null |
104 | | defaultSort | Object | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | `order`: asc, desc | if `prop` is set, and `order` is not set, then order is default to **ascending** |
105 | | sortState | Object | set the handle sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | `order`: asc, desc | - |
106 | | headerColsWidth | Array | columns width | -  | - |
107 | 
108 | ### Events
109 | 
110 | | Event Name | Description | params |
111 | | ----- | ----- | ----- |
112 | | columnsReady | triggers when table element is ready | columns |
113 | | sortChange | triggers when sort state or sort order changes | {sort: {prop, order}, column} |
114 | | colsWidth | triggers when table data changes | widths |
115 | | distanXChange | triggers when drag table rest assured is horizontal | width |
116 | | rowClick | triggers when clicking a row | row |
117 | 
118 | ## Table-column
119 | 
120 | ### Attributes
121 | 
122 | | Option | Type | Description | Accepted Values | Default |
123 | | ----- | ----- | ----- | ----- | ----- |
124 | | prop | String | field name. You can also use its alias: property | -  | - |
125 | | label | String | column label | -  | - |
126 | | align | String | alignment | left/center/right | left |
127 | | width | String | column width | -  | - |
128 | | fixed | String | whether column is fixed. Will be fixed at left if true | true, false | false |
129 | | sortable | Boolean | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the sort-change event of Table | true, false | false |
130 | | formatter | Function(row, column, cellValue, index)	 | function that formats cell content | - | - |
131 | 
132 | ## Table-header
133 | 
134 | ### Attributes
135 | 
136 | | Option | Type | Description | Accepted Values | Default |
137 | | ----- | ----- | ----- | ----- | ----- |
138 | | columns | Array | columns | -  | - |
139 | | colsWidth | Array | columns width | -  | - |
140 | | distanX | Number | table rest assured is horizontal | left/center/right | left |
141 | | defaultSort | Object | set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | `order`: asc, desc | if `prop` is set, and `order` is not set, then order is default to **ascending** |
142 | | sortState | Object | set the handle sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order | `order`: asc, desc | - |
143 | 
144 | ### Events
145 | 
146 | | Event Name | Description | params |
147 | | ----- | ----- | ----- |
148 | | sortChange | triggers when sort state or sort order changes | {sort: {prop, order}, column} |
149 | | headerColsWidth | triggers when table columns changes | widths |
150 | 
151 | ## Development
152 | 
153 | Watching with hot-reload:
154 | 
155 | ```bash
156 | $ npm run dev
157 | ```
158 | 
159 | Develop on real remote device:
160 | 
161 | ```bash
162 | $ npm run remote-dev {{ YOUR IP ADDRESS }}
163 | ```
164 | 
165 | ## License
166 | 
167 | MIT
168 | 


--------------------------------------------------------------------------------
/src/table-content.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="table-wrapper" ref="tableWrapper">
  3 |   <table ref="tableContnt"
  4 |     @touchstart="touchStartHandle"
  5 |     @touchmove="touchMoveHandle"
  6 |     @touchend="touchEndHandle"
  7 |     @mousemove="mousemoveHandle"
  8 |     @mouseup="mouseupHandle"
  9 |     @mousedown="mousedownHandle"
 10 |     @webkit-transition-end="onTransitionEnd()"
 11 |     @transitionend="onTransitionEnd()"
 12 |     :style="{
 13 |       width: tableWidth + 'px'
 14 |     }"
 15 |   >
 16 |     <colgroup>
 17 |       <col v-for="(item, index) in colsWidth" :key="index" :width="item" />
 18 |     </colgroup>
 19 |     <thead v-if="showHeader">
 20 |       <tr ref="tableTheaderWrapper">
 21 |         <table-column-header v-for="(column, index) in panes"
 22 |           :class="[
 23 |             'table-column', 
 24 |             index === 0 ? 'first-table-column' : '', 
 25 |             index === panes.length - 1 ? 'last-table-column' : '', 
 26 |           ]" 
 27 |           :key="column.prop + index"
 28 |           :column="column"
 29 |           :sort="sort"
 30 |           @handleHeadSortClick="handleHeadSortClick"
 31 |         ></table-column-header>
 32 |       </tr>
 33 |     </thead>
 34 |     <tbody v-if="contentType !== 'header'">
 35 |       <table-row v-for="(row, index) in rows"
 36 |         :key="row.__vue_item_id"
 37 |         :row="row"
 38 |         :columns="panes"
 39 |         :isLastRow="index === rows.length - 1"
 40 |         @colsWidth="setColsWidth"
 41 |         @rowClick="rowClick"
 42 |       ></table-row>
 43 |     </tbody>
 44 |   </table>
 45 | </div>
 46 | </template>
 47 | <script>
 48 | import TableColumnHeader from './table-column-header.vue';
 49 | import TableRow from './table-row.vue';
 50 | export default {
 51 |   name: 'snb-table-thead',
 52 |   components: {
 53 |     TableColumnHeader, TableRow
 54 |   },
 55 |   props: {
 56 |     // 组件容器类型区分
 57 |     contentType: {
 58 |       type: String,
 59 |       default: ''
 60 |     },
 61 |     // 是否显示表头
 62 |     showHeader: {
 63 |       type: Boolean,
 64 |       default: true
 65 |     },
 66 |     // 表头格式
 67 |     panes: {
 68 |       type: Array,
 69 |       default: () => []
 70 |     },
 71 |     // 表内容数据
 72 |     rows: {
 73 |       type: Array,
 74 |       default: () => []
 75 |     },
 76 |     // 排序筛选
 77 |     sort: {
 78 |       type: Object,
 79 |       default: () => {}
 80 |     },
 81 |     // 表格各列宽度
 82 |     colsWidth: {
 83 |       type: Array,
 84 |       default: () => []
 85 |     },
 86 |     distanX: {
 87 |       type: Number,
 88 |       default: 0
 89 |     }
 90 |   },
 91 |   data () {
 92 |     return {
 93 |       tableContnt: null, // table dom 元素
 94 |       tableWrapperWidth: 0, // 表格显示宽度
 95 |       leftColumnWidth: 0, // 固定列宽度
 96 |       direction: null, // 滚动方向标记 left/right
 97 |       isAnimation: false, // 动画中状态标记
 98 |       start: { // 位置标记 开始
 99 |         x: null,
100 |         y: null
101 |       },
102 |       end: { // 位置标记 结束
103 |         x: null,
104 |         y: null
105 |       },
106 |       distan: { // 移动位置标记
107 |         x: 0,
108 |         y: 0
109 |       },
110 |     };
111 |   },
112 |   computed: {
113 |     // 表格实际宽度
114 |     tableWidth () {
115 |       if (!this.colsWidth.length) {
116 |         return Math.ceil(this.tableWrapperWidth);
117 |       }
118 |       let _width = 0;
119 |       this.colsWidth.map(width => {
120 |         _width = _width + width * 1;
121 |       });
122 |       _width = _width ? _width + 1 : _width;
123 |       return Math.ceil(Math.max(_width, this.tableWrapperWidth));
124 |     },
125 |     overflowWidth () {
126 |       return Math.ceil(Math.max(this.tableWidth - this.tableWrapperWidth, 0));
127 |     },
128 |     isScrollTable () {
129 |       return this.tableWidth <= this.tableWrapperWidth;
130 |     }
131 |   },
132 |   created() {
133 |   },
134 |   mounted () {
135 |     this.tableContnt = this.$refs.tableContnt;
136 |     this.setTableWrapperWidth(); // 设置表格实际宽度
137 |     this.getHeaderCellsWidth();
138 |   },
139 |   methods: {
140 |     // 设置表格实际宽度
141 |     setTableWrapperWidth () {
142 |       this.$nextTick(() => {
143 |         this.tableWrapperWidth = this.$refs.tableWrapper && this.$refs.tableWrapper.offsetWidth || 0;       
144 |       });
145 |     },
146 |     // 设置固定列宽
147 |     setCellElWidth (width) {
148 |       this.leftColumnWidth = width * 1;
149 |     },
150 |     // 设置全列宽
151 |     setColsWidth (widths = []) {
152 |       if (this.contentType !== 'body') return;
153 |       this.$emit('colsWidth', widths);
154 |     },
155 |     getHeaderCellsWidth () {
156 |       if (!this.$refs.tableTheaderWrapper) return;
157 |       this.$nextTick(() => {
158 |         const _colWidth = [];
159 |         let _childDomArr = this.$refs.tableTheaderWrapper.querySelectorAll('.table-column');
160 |         for (let i = 0; i < _childDomArr.length; i++) {
161 |           _colWidth.push(_childDomArr[i].offsetWidth);
162 |         }
163 |         this.$emit('headerColsWidth', _colWidth);
164 |       }); 
165 |     },
166 |     // 数据排序
167 |     handleHeadSortClick (column) {
168 |       this.$emit('handleHeadSortClick', column);
169 |     },
170 |     // 设置表格横轴滚动放心
171 |     setTableDistanX () {
172 |       if (this.contentType === 'leftFixed') return;
173 |       this.tableContnt.style['transform'] = 'translateX(' + this.distanX + 'px)';
174 |       this.tableContnt.style['transition'] = 'none';
175 |     },
176 |     /**
177 |      * mousedown handle
178 |      */
179 |     mousedownHandle (event) {
180 |       this.startHandle(event);
181 |     },
182 |     /**
183 |      * mousemove handle
184 |      */
185 |     mousemoveHandle (event) {
186 |       this.moveHandle(event);
187 |     },
188 |     /**
189 |      * mouseup handle
190 |      */
191 |     mouseupHandle (event) {
192 |       this.endHandle(event);
193 |     },
194 |     /**
195 |      * touchstart handle
196 |      */
197 |     touchStartHandle (event) {
198 |       let touch = event.touches[0];
199 |       this.startHandle(touch);
200 |     },
201 |     /**
202 |      * touchmove handle
203 |      */
204 |     touchMoveHandle (event) {
205 |       let touch = event.touches[0];
206 |       this.moveHandle(touch);
207 |     },
208 |     /**
209 |      * touchend handle
210 |      */
211 |     touchEndHandle (event) {
212 |       let touch = event.changedTouches[0];
213 |       this.endHandle(touch);
214 |     },
215 |     onTransitionEnd () {
216 |       this.isAnimation = false;
217 |     },
218 |     startHandle (offset) {
219 |       if (this.contentType !== 'body') return;
220 |       this.isAnimation = true;
221 |       this.start.x = offset.pageX;
222 |       this.start.y = offset.pageY;
223 |     },
224 |     moveHandle (offset) {
225 |       if (this.contentType !== 'body' || !this.isAnimation) return;
226 |       this.end.x = offset.pageX;
227 |       this.end.y = offset.pageY;
228 |       this.getTouchDirection(this.end.x - this.start.x, this.end.y - this.start.y);
229 |       if (this.direction) {
230 |         let _distanX = this.end.x - this.start.x;
231 |         _distanX = Math.min(this.distan.x + _distanX, 0);
232 |         _distanX = Math.max(this.overflowWidth * -1, _distanX);
233 |         this.$emit('translateChange', _distanX, this.contentType);
234 |       }
235 |     },
236 |     endHandle (offset) {
237 |       if (this.contentType !== 'body') return;
238 |       this.isAnimation = false;
239 |       this.end.x = offset.pageX;
240 |       let _distanX = this.distan.x + (this.end.x - this.start.x);
241 |       _distanX = Math.min(_distanX, 0);
242 |       _distanX = Math.max(this.overflowWidth * -1, _distanX);
243 |       this.distan.x = _distanX;
244 |     },
245 |     /**
246 |      * getAngle 计算角度
247 |      */
248 |     getAngle (x, y) {
249 |       return Math.atan2(y, x) * 180 / Math.PI;
250 |     },
251 |     /**
252 |      * getTouchDirection 获取滑动方向
253 |      */
254 |     getTouchDirection (x, y) {
255 |       if (Math.abs(x) > 5) {
256 |         let angle = this.getAngle(x, y);
257 |         if (angle >= -45 && angle <= 45) { // 向右
258 |           this.direction = 'right';
259 |         } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) { // 向左
260 |           this.direction = 'left';
261 |         }
262 |       } else {
263 |         this.direction = null;
264 |       }      
265 |     },
266 |     rowClick (row) {
267 |       this.$emit('rowClick', row);
268 |     }
269 |   },
270 |   watch: {
271 |     distanX () {
272 |       this.setTableDistanX();
273 |     }
274 |   }
275 | };
276 | </script>
277 | <style lang="stylus">
278 | .table-wrapper
279 |   width 100%
280 |   overflow hidden
281 | </style>
282 | 
283 | 


--------------------------------------------------------------------------------
/src/table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="ui-snb-table">
  3 |   <div class="table-fixed">
  4 |     <table-content class="table-fixed-top" v-if="showHeader && (hasFixedCell || inHeaderFixed)"
  5 |       contentType="header"
  6 |       :panes="panes"
  7 |       :sort="sort"
  8 |       :colsWidth="colsWidth"
  9 |       :distanX="distanX"
 10 | 
 11 |       :rows="rows"
 12 |       @handleHeadSortClick="handleHeadSortClick"
 13 |       @translateChange="translateChange"
 14 |       :class="{
 15 |         'in-fixed-header': inHeaderFixed
 16 |       }"
 17 |       :style="fixedTopStyle"
 18 |     />
 19 |     <table-content class="table-fixed-left" v-if="hasFixedCell"
 20 |       contentType="leftFixed"
 21 |       :showHeader="showHeader"
 22 |       :panes="panes"
 23 |       :sort="sort"
 24 |       :colsWidth="colsWidth"
 25 |       :distanX="distanX"
 26 | 
 27 |       :rows="rows"
 28 |       @handleHeadSortClick="handleHeadSortClick"
 29 |       @translateChange="translateChange"
 30 |       @rowClick="rowClick"
 31 |       :style="{
 32 |         width: leftColumnWidth + 'px'
 33 |       }"
 34 |       :class="{
 35 |         'in-fixed-table': Math.abs(distanX) > 5
 36 |       }"
 37 |     />
 38 |   </div>
 39 |   <table-content
 40 |     contentType="body"
 41 |     :showHeader="showHeader"
 42 |     :panes="panes"
 43 |     :sort="sort"
 44 |     :colsWidth="colsWidth"
 45 |     :distanX="distanX"
 46 | 
 47 |     :rows="rows"
 48 |     @handleHeadSortClick="handleHeadSortClick"
 49 |     @colsWidth="setColsWidth"
 50 |     @translateChange="translateChange"
 51 |     @rowClick="rowClick"
 52 |   />
 53 |   <div class="hidden-columns"><slot></slot></div>
 54 | </div>
 55 | </template>
 56 | 
 57 | <script>
 58 | import TableContent from './table-content.vue';
 59 | export default {
 60 |   name: 'snb-table',
 61 |   components: {
 62 |     TableContent,
 63 |   },
 64 |   props: {
 65 |     data: { // table数据
 66 |       type: Array,
 67 |       default: () => [],
 68 |     },
 69 |     defaultSort: { // 默认排序 由于涉及到数据分页这里只显示 这里并不会在组件内对数据进行排序处理
 70 |       type: Object,
 71 |       default: () => {}
 72 |     },
 73 |     sortState: { // 手动排序 只对表头排序状态进行改变
 74 |       type: Object,
 75 |       default: () => {}
 76 |     },
 77 |     headerFixed: { // 表头是否吸顶
 78 |       type: Object,
 79 |       default: () => {}
 80 |     },
 81 |     headerColsWidth: { // 表头列宽
 82 |       type: Array,
 83 |       default: () => [],
 84 |     },
 85 |     // 是否显示表头
 86 |     showHeader: { // 是否显示表头
 87 |       type: Boolean,
 88 |       default: true
 89 |     },
 90 |   },
 91 |   data () {
 92 |     return {
 93 |       hasFixedCell: false, // 是否存在固定列
 94 |       tableWrapperWidth: 0, // 表格实际宽度
 95 |       colsWidth: [], // 表格各列宽度
 96 |       sort: {
 97 |         prop: '',
 98 |         order: '',
 99 |         defaultProp: ''
100 |       },
101 |       rows: [],
102 |       panes: [],
103 |       distanX: 0
104 |     };
105 |   },
106 |   computed: {
107 |     // 固定列宽度
108 |     leftColumnWidth () {
109 |       if (!this.colsWidth.length) {
110 |         return 0;
111 |       }
112 |       return this.colsWidth[0] * 1 || 0;
113 |     },
114 |     inHeaderFixed () {
115 |       let _fheaderFixedOpt = this.headerFixed || {};
116 |       return _fheaderFixedOpt.state;
117 |     },
118 |     fixedTopStyle () {
119 |       let _stype = {};
120 |       if (this.inHeaderFixed) {
121 |         _stype.position = 'fixed';
122 |         _stype.left = 0;
123 |         _stype.top = `${this.headerFixed.top || 0}px`;
124 |         _stype.zIndex = 20;
125 |       }
126 |       return _stype;
127 |     }
128 |   },
129 |   created() {
130 |     this.sort.prop = this.defaultSort ? this.defaultSort.prop : '';
131 |     this.sort.order = this.defaultSort ? this.defaultSort.order : '';
132 |     this.sort.defaultProp = this.defaultSort ? this.defaultSort.prop : '';
133 |   },
134 |   mounted () {
135 |     this.calcPaneInstances(); // 设置表头数据
136 |     this.mapDataToRows(); // 整理 tbody 数据
137 |     if (this.headerColsWidth && this.headerColsWidth.length) {
138 |       this.emitColsWidth();
139 |     }
140 |   },
141 |   methods: {
142 |     // 设置表头数据
143 |     calcPaneInstances () {
144 |       if (this.$slots.default) {
145 |         const paneSlots = this.$slots.default.filter(vnode => vnode.tag &&
146 |           vnode.componentOptions && 
147 |           (vnode.componentOptions.Ctor.options.name === 'snb-table-column' || vnode.componentOptions.tag === 'SnbTableColumn')
148 |         );
149 |         const panes = paneSlots.map(({ componentInstance }) => componentInstance);
150 |         const panesChanged = !(panes.length === this.panes.length && panes.every((pane, index) => pane === this.panes[index]));
151 |         if (panesChanged) {
152 |           // this.panes = panes;
153 |           this.reductionColumns(panes);
154 |         }
155 |       } else if (this.panes.length !== 0) {
156 |         // this.panes = [];
157 |         this.reductionColumns();
158 |       }
159 |     },
160 |     // 表头数据整理
161 |     reductionColumns (columns = []) {
162 |       let _columns = [];
163 |       let fixedCell = null;
164 |       if (columns && columns.length) {
165 |         columns.map(item => {
166 |           if (item.fixed && !fixedCell) {
167 |             fixedCell = item || {};
168 |           } else {
169 |             _columns.push(item);            
170 |           }
171 |         });
172 |         if (fixedCell) {
173 |           _columns.unshift(fixedCell);
174 |         }
175 |       }
176 |       this.panes = _columns;
177 |       this.$emit('columnsReady', _columns);
178 |       this.hasFixedCell = !!fixedCell;
179 |     },
180 |     // 整理 tbody 数据
181 |     mapDataToRows () {
182 |       const data = this.data;
183 |       let rowId = 0;
184 |       this.rows = data
185 |         .map(rowData => {
186 |           rowData.__vue_item_id = rowId++;
187 |           return rowData;
188 |         });
189 |     },
190 |     // 数据排序
191 |     handleHeadSortClick (column) {
192 |       if (this.sort.prop !== column.prop) {
193 |         this.sort.prop = column.prop;
194 |         this.sort.order = 'asc';
195 |       } else {
196 |         this.sort.order = this.sort.order || 'asc';
197 |       }
198 |       this.$emit('sortChange', this.sort, column);
199 |     },
200 |     // 设置全列宽
201 |     setColsWidth (widths = []) {
202 |       this.colsWidth = widths;
203 |       this.emitColsWidth();
204 |     },
205 |     // 设置列宽度
206 |     emitColsWidth () {
207 |       const widths = this.colsWidth;
208 |       if (!widths || !widths.length) return;
209 |       const _headerColsWidth = this.headerColsWidth;
210 |       if (!_headerColsWidth || !_headerColsWidth.length) {
211 |         this.$emit('colsWidth', widths);
212 |         return;
213 |       }
214 |       const _width = [];
215 |       widths.map((width, index) => {
216 |         _width[index] = Math.max(_headerColsWidth[index] || 0, widths[index] || 0);
217 |       });
218 |       this.colsWidth = _width;
219 |       this.$emit('colsWidth', _width);
220 |       this.translateChange(this.distanX);
221 |     },
222 |     // 设置横向偏移量
223 |     translateChange (width) {
224 |       this.distanX = width;
225 |       this.$emit('distanXChange', width);
226 |     },
227 |     // 整行点击
228 |     rowClick (row) {
229 |       this.$emit('rowClick', row);
230 |     }
231 |   },
232 |   watch: {
233 |     data () {
234 |       this.mapDataToRows(); // 整理 tbody 数据
235 |     },
236 |     // 定义排序显示状态
237 |     sortState (sort = {}) {
238 |       this.sort.order = sort.order || this.defaultSort.order || '';
239 |     },
240 |     headerColsWidth () {
241 |       this.emitColsWidth();
242 |     }
243 |   }
244 | };
245 | </script>
246 | <style lang="stylus">
247 | table
248 |   border-collapse:collapse
249 |   border-spacing:0
250 | .ui-snb-table
251 |   position relative
252 |   width 100%
253 |   overflow hidden
254 |   .table-fixed
255 |     .table-fixed-top
256 |       position absolute
257 |       left 0
258 |       top 0
259 |       z-index 8
260 |       overflow hidden
261 |       width 100%
262 |     .table-fixed-left
263 |       position absolute
264 |       left 0
265 |       top 0
266 |       z-index 9
267 |       overflow hidden  
268 |       &.in-fixed-table
269 |         box-shadow 0 0 5px rgba(0,0,0,.12)
270 |   .hidden-columns
271 |     display none
272 |   th,td
273 |     margin 0
274 |     padding 0   
275 |     white-space nowrap
276 |     border 1px solid #ebeef5
277 |     text-align left
278 |     .cell
279 |       padding 10px 5px  
280 |   tbody
281 |     th, td
282 |       background #fff    
283 |   thead
284 |     th, td
285 |       background #f5f7fa
286 |   .is-left
287 |     text-align left
288 |   .is-right
289 |     text-align right 
290 |   .is-center
291 |     text-align center 
292 | </style>
293 | 


--------------------------------------------------------------------------------
/example/example.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div id="demo" :class="{
  3 |   'is-pc': !browser.isMobile
  4 | }">
  5 |   <div class="header">
  6 |     <div class="example-tips" v-if="!browser.isMobile">请在移动端打开，或者使用浏览器开发者模式。</div>
  7 |     <div class="inner">
  8 |       <h1>Table 表格 <span>V2.6.X</span></h1>
  9 |       <a class="masthead-links" target="_blank" href="https://github.com/cherislive/vue-snb-table">
 10 |         <svg height="22" class="octicon octicon-mark-github d-block mr-2 float-left" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
 11 |       </a>
 12 |     </div>
 13 |   </div>  
 14 |   <div class="example-wrap">
 15 |     <div class="demo-tit">
 16 |       <h1>Table 表格</h1>
 17 |       <p>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</p>
 18 |     </div>
 19 | 
 20 |     <div class="demo-item">
 21 |       <div class="demo-tit"><h3>基础表格</h3></div>
 22 |       <div class="demo-block">
 23 |         <SnbTable :data="tableData">
 24 |           <SnbTableColumn prop="name" label="姓名" />
 25 |           <SnbTableColumn prop="gender" label="性别" />
 26 |           <SnbTableColumn prop="email" label="邮箱" />
 27 |         </SnbTable>
 28 |         <div class="demo-desc" v-highlight>
 29 |           默认配置
 30 | <pre><code>&lt;SnbTable :data="tableData"&gt;
 31 |   &lt;SnbTableColumn prop="name" label="姓名" /&gt;
 32 |   &lt;SnbTableColumn prop="gender" label="性别" /&gt;
 33 |   &lt;SnbTableColumn prop="email" label="邮箱" /&gt;
 34 | &lt;/SnbTable&gt;
 35 | </code></pre>
 36 |         </div>
 37 |       </div>
 38 |     </div>
 39 | 
 40 |     <div class="demo-item">
 41 |       <div class="demo-tit">
 42 |         <h3>固定列</h3>
 43 |         <p>横向内容过多时，可选择固定列。</p>
 44 |       </div>
 45 |       <div class="demo-block">
 46 |         <SnbTable :data="tableData">
 47 |           <SnbTableColumn prop="name" label="姓名" />
 48 |           <SnbTableColumn prop="gender" label="性别" fixed />
 49 |           <SnbTableColumn prop="email" label="邮箱" />
 50 |           <SnbTableColumn prop="address" label="地址" />
 51 |         </SnbTable>
 52 |         <div class="demo-desc" v-highlight>
 53 |           固定列需要使用fixed属性，它接受 Boolean 值，固定的列默认固定在左侧。
 54 | <pre><code>&lt;SnbTable :data="tableData"&gt;
 55 |   &lt;SnbTableColumn prop="name" label="姓名" /&gt;
 56 |   &lt;SnbTableColumn prop="gender" label="性别" fixed /&gt;
 57 |   &lt;SnbTableColumn prop="address" label="地址" /&gt;
 58 | &lt;/SnbTable&gt;
 59 | </code></pre>
 60 |         </div>
 61 |       </div>
 62 |     </div>
 63 | 
 64 |     <div class="demo-item">
 65 |       <div class="demo-tit">
 66 |         <h3>固定表头</h3>
 67 |         <p>纵向内容过多时，可选择固定表头。(本组件建议采用表头分离方式)</p>
 68 |       </div>
 69 |       <div class="demo-block">
 70 |         <SnbTable :data="[]">
 71 |           <SnbTableColumn prop="name" label="姓名" />
 72 |           <SnbTableColumn prop="gender" label="性别" />
 73 |         </SnbTable>
 74 |         <div class="demo-desc" v-highlight>
 75 |           由于在移动端，通常采用lodemore滚动加载，而不是传统的分页这里的固定表头使用场景局限性比较强。这里不做演示。
 76 | <pre><code>&lt;SnbTable :data="tableData" :headerFixed="{
 77 |   state: true,
 78 |   top: 200
 79 | }"&gt;
 80 |   &lt;SnbTableColumn prop="name" label="姓名" /&gt;
 81 |   &lt;SnbTableColumn prop="gender" label="性别" fixed /&gt;
 82 | &lt;/SnbTable&gt;
 83 | </code></pre>
 84 |         </div>
 85 |       </div>
 86 |     </div>
 87 | 
 88 | 
 89 |     <div class="demo-item">
 90 |       <div class="demo-tit">
 91 |         <h3>排序</h3>
 92 |         <p>对表格进行排序，可快速查找或对比数据。</p>
 93 |       </div>
 94 |       <div class="demo-block">
 95 |         <SnbTable 
 96 |           :data="tableData"
 97 |           :sortState="sortState"
 98 |           :defaultSort="defaultSort"
 99 |           @sortChange="sortChange"
100 |         >
101 |           <SnbTableColumn prop="name" label="姓名"  />
102 |           <SnbTableColumn prop="gender" label="性别" :formatter="(val) => {
103 |             return val === 'male' ? '男' : '女';
104 |             }" sortable />
105 |           <SnbTableColumn prop="email" label="邮箱" sortable />
106 |         </SnbTable>
107 |         <div class="demo-desc" v-highlight>
108 |           由于在移动端，通常采用lodemore滚动加载，排序建议在组件外处理。
109 | <pre><code>
110 | &lt;template&gt;
111 |   &lt;SnbTable 
112 |     :data="tableData"
113 |     :sortState="sortState"
114 |     :defaultSort="defaultSort"
115 |     @sortChange="sortChange"
116 |   &gt;
117 |     &lt;SnbTableColumn prop="name" label="姓名" /&gt;
118 |     &lt;SnbTableColumn prop="gender" label="性别" fixed /&gt;
119 |   &lt;/SnbTable&gt;
120 | &lt;/template&gt;
121 | 
122 | &lt;script&gt;
123 |   import _ from 'lodash';
124 |   // some code
125 |   data() {
126 |     return {
127 |       tableData: [],
128 |       sortState: {}, // 存储手动排序的结果
129 |       defaultSort: { // 列表默认排序
130 |         prop: '',
131 |         order: ''
132 |       }
133 |     };
134 |   },
135 |   methods: {
136 |     // 数据排序
137 |     sortChange (sort) {
138 |       const order = sort.order === 'asc' ? 'desc' : 'asc';
139 |       this.sortState = {
140 |         prop: sort.prop,
141 |         order: order
142 |       };
143 |       this.tableData = _.orderBy(this.tableData, this.sortState.prop, this.sortState.order);
144 |     },
145 |   }
146 | &lt;script&gt;
147 | </code></pre>
148 |         </div>
149 |       </div>
150 |     </div>
151 | 
152 | 
153 | 
154 |     <div class="demo-item">
155 |       <div class="demo-tit">
156 |         <h3>表头分离</h3>
157 |         <p>纵向内容过多时，可采用表头分离方式。</p>
158 |       </div>
159 |       <div class="demo-block">
160 |          表头
161 |         <SnbTableHeader
162 |           :columns="columns" 
163 |           :colsWidth="colsWidth" 
164 |           :distanX="tableHeaderDistanX"
165 |           :defaultSort="defaultSort"
166 |           :sortState="sortState"
167 |           @sortChange="sortChange"
168 |           @headerColsWidth="setHeaderColsWidth"
169 |         />
170 |         表内容 （通常隐藏表头）
171 |         <SnbTable 
172 |           :data="tableData"
173 |           :showHeader="false"
174 |           :sortState="sortState"
175 |           :defaultSort="defaultSort"
176 |           :headerColsWidth="headerColsWidth" 
177 |           @columnsReady="setColumns"
178 |           @colsWidth="setColsWidth"
179 |           @sortChange="sortChange"
180 |           @distanXChange="distanXChange"
181 |         >
182 |           <SnbTableColumn prop="name" label="姓名" />
183 |           <SnbTableColumn prop="gender" label="性别字段" :formatter="(val) => {
184 |             return val === 'male' ? '男' : '女';
185 |             }" sortable />
186 |           <SnbTableColumn prop="email" label="邮箱" sortable />
187 |           <SnbTableColumn prop="email" label="邮箱" sortable />
188 |           <SnbTableColumn prop="email" label="邮箱" sortable />
189 |         </SnbTable>
190 |         <div class="demo-desc" v-highlight>
191 |           这里的参数较多，因为表头、表body分离后，我们不仅要保证排序功能的正常使用，而且列宽度要相互撑开。例如性别，他的宽度就是由header部分撑开的。
192 | <pre><code>
193 | &lt;template&gt;
194 |   &lt;SnbTableHeader 
195 |     :columns="columns" 
196 |     :colsWidth="colsWidth" 
197 |     :distanX="tableHeaderDistanX"
198 |     :defaultSort="defaultSort"
199 |     :sortState="sortState"
200 |     @sortChange="sortChange"
201 |     @headerColsWidth="setHeaderColsWidth"
202 |   &gt;
203 |   &lt;SnbTable 
204 |     :data="tableData"
205 |     :showHeader="false"
206 |     :sortState="sortState"
207 |     :defaultSort="defaultSort"
208 |     :headerColsWidth="headerColsWidth" 
209 |     @columnsReady="setColumns"
210 |     @colsWidth="setColsWidth"
211 |     @sortChange="sortChange"
212 |     @distanXChange="distanXChange"
213 |   &gt;
214 |     &lt;SnbTableColumn prop="name" label="姓名" /&gt;
215 |     &lt;SnbTableColumn prop="gender" label="性别" fixed /&gt;
216 |   &lt;/SnbTable&gt;
217 | &lt;/template&gt;
218 | 
219 | &lt;script&gt;
220 |   import _ from 'lodash';
221 |   // some code
222 |   data() {
223 |     return {
224 |       tableData: [],
225 |       columns: [], // 表头
226 |       colsWidth: [], // body列宽度
227 |       headerColsWidth: [], // 表头列宽度
228 |       tableHeaderDistanX: 0, // 表头横向滚动宽度
229 |       sortState: {}, // 存储手动排序的结果
230 |       defaultSort: { // 列表默认排序
231 |         prop: '',
232 |         order: ''
233 |       }
234 |     };
235 |   },
236 |   methods: {
237 |     // 设置表头
238 |     setColumns (columns) {
239 |       this.columns = columns;
240 |     },
241 |     // 设置列宽
242 |     setColsWidth (width = []) {
243 |       this.colsWidth = width;
244 |     },
245 |     // 设置表头列宽
246 |     setHeaderColsWidth (width = []) {
247 |       this.headerColsWidth = width;
248 |     },
249 |     // 设置表头横向滚动
250 |     distanXChange (width = 0) {
251 |       this.tableHeaderDistanX = width;
252 |     },
253 |     // 数据排序
254 |     sortChange (sort) {
255 |       const order = sort.order === 'asc' ? 'desc' : 'asc';
256 |       this.sortState = {
257 |         prop: sort.prop,
258 |         order: order
259 |       };
260 |       this.tableData = _.orderBy(this.tableData, this.sortState.prop, this.sortState.order);
261 |     },
262 |   }
263 | &lt;script&gt;
264 | </code></pre>
265 |         </div>
266 |       </div>
267 |     </div>
268 | 
269 |   </div>
270 |   <div class="footer">
271 |     <p>Open sourced under MIT. <br />Copyright &copy; 2019 <a href="https://www.cheris.cn" target="_blank">CHERIS.CN</a>, All rights reserved.</p>
272 |     <ul class="quick-links">
273 |     <li>
274 |       <iframe src="https://ghbtns.com/github-btn.html?user=cherislive&repo=vue-snb-table&type=star&count=false" frameborder="0" scrolling="0" width="50px" height="20px"></iframe>
275 |     </li>
276 |     <li>
277 |       <iframe src="https://ghbtns.com/github-btn.html?user=cherislive&repo=vue-snb-table&type=fork&count=false" frameborder="0" scrolling="0" width="50px" height="20px"></iframe>
278 |     </li>
279 |   </ul>
280 |   </div>
281 | </div>
282 | </template>
283 | 
284 | <script>
285 |   import _ from 'lodash';
286 |   import { SnbTable, SnbTableColumn, SnbTableHeader } from '../src';
287 |   export default {
288 |     components: {
289 |       SnbTable, SnbTableColumn, SnbTableHeader
290 |     },
291 |     data() {
292 |       return {
293 |         browser: {},
294 |         tableData: [{
295 |           name: 'blanca hidalgo',
296 |           gender: 'male',
297 |           email: 'blanca.hidalgo@example.com',
298 |           address: 'No. 189, Grove St, Los Angeles'
299 |         }, {
300 |           name: 'delphine fournier',
301 |           gender: 'female',
302 |           email: 'delphine.fournier@example.com',
303 |           address: 'No. 189, Grove St, Los Angeles'
304 |         }, {
305 |           name: 'iiris hatala',
306 |           gender: 'female',
307 |           email: 'iiris.hatala@example.com',
308 |           address: 'No. 189, Grove St, Los Angeles'
309 |         }, {
310 |           name: 'anastasia garcia',
311 |           gender: 'male',
312 |           email: 'anastasia.garcia@example.com',
313 |           address: 'No. 189, Grove St, Los Angeles'
314 |         }, {
315 |           name: 'tanya johnston',
316 |           gender: 'male',
317 |           email: 'tanya.johnston.garcia@example.com',
318 |           address: 'No. 189, Grove St, Los Angeles'
319 |         }],
320 |         columns: [], // 表头
321 |         colsWidth: [], // body列宽度
322 |         headerColsWidth: [], // 表头列宽度
323 |         tableHeaderDistanX: 0, // 表头横向滚动宽度
324 |         sortState: {}, // 存储手动排序的结果
325 |         defaultSort: { // 列表默认排序
326 |           prop: '',
327 |           order: ''
328 |         }
329 |       };
330 |     },
331 |     computed: {},
332 |     created() {
333 |       this.initEnvironment();
334 |     },
335 |     methods: {
336 |       // 初始化环境
337 |       initEnvironment() {
338 |         let u = navigator.userAgent;
339 |         this.browser.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // Android 终端
340 |         this.browser.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS 终端
341 |         this.browser.isMobile = !!u.match(/AppleWebKit.*Mobile.*/); // 是否为移动终端
342 |       },
343 |       // 设置表头
344 |       setColumns (columns) {
345 |         this.columns = columns;
346 |       },
347 |       // 设置列宽
348 |       setColsWidth (width = []) {
349 |         this.colsWidth = width;
350 |       },
351 |       // 设置表头列宽
352 |       setHeaderColsWidth (width = []) {
353 |         this.headerColsWidth = width;
354 |       },
355 |       // 设置表头横向滚动
356 |       distanXChange (width = 0) {
357 |         this.tableHeaderDistanX = width;
358 |       },
359 |       // 数据排序
360 |       sortChange (sort) {
361 |         const order = sort.order === 'asc' ? 'desc' : 'asc';
362 |         this.sortState = {
363 |           prop: sort.prop,
364 |           order: order
365 |         };
366 |         this.tableData = _.orderBy(this.tableData, this.sortState.prop, this.sortState.order);
367 |       },
368 |     }
369 |   };
370 | </script>
371 | 
372 | <style>
373 | html,body,#demo{background:#fff;}
374 | #demo{padding:60px 0 20px; color:#606266;}
375 | #demo.is-pc{padding-top:100px;}
376 | .header{position: fixed; left:0; top:0; z-index:10; width:100%;background:#fff;  margin:0 auto; border-bottom:1px solid #e5e5e5;}
377 | .header .inner{display:block; margin:0 auto; padding: 10px 20px; overflow: hidden;}
378 | .header .inner h1{font-size:16px; float: left;}
379 | .header .inner h1 span{font-size:12px; color:#999;}
380 | .header .masthead-links{float: right; display:block;color:#000; opacity:.3;}
381 | .header .masthead-links svg{display:block;}
382 | .example-tips{width:100%; text-align:center; font-size:14px; line-height:32px; background:#090723; color:rgba(255,255,255,.5);}
383 | .example-wrap{max-width: 640px; width:90%; background:#fff; margin:0 auto;}
384 | .example-wrap .demo-desc{padding:10px 0; font-size:12px; line-height:22px; color:#999; font-weight:normal;}
385 | .base-slider-item{height:126px; color:#fff; font-size:36px; line-height:126px; text-align:center; background:#ccc;}
386 | .demo-item{padding:0 0 30px;}
387 | .demo-tit{padding:10px; font-size:14px; line-height:26px; color:#5e6d82;}
388 | .demo-tit h1{font-size:26px; line-height:32px; font-weight:normal; color:#1f2f3d;}
389 | .demo-tit h3{font-size:18px; line-height:26px; font-weight:normal; color:#1f2f3d;}
390 | .demo-block{padding:10px; border: 1px solid #ebebeb; border-radius: 3px; transition: .2s;}
391 | .demo-block:hover{box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);}
392 | .quick-links{text-align:center;}
393 | .footer{padding-top:20px; text-align:center; color:#999; font-size:12px;}
394 | .footer p{font-size:12px; color:#999; text-align:center;}
395 | .footer a{color:#999;}
396 | .quick-links{padding-top:10px;} 
397 | .quick-links li{display:inline-block;}
398 | .footer .masthead-links{display:inline-block;color:#000; opacity:.3;}
399 | .footer .masthead-links svg{display:block;}
400 | </style>
401 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSnbTable=e():t.VueSnbTable=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=19)}([function(t,e,n){"use strict";function i(t,e,n,i,o,r,a,s){var l=typeof(t=t||{}).default;"object"!==l&&"function"!==l||(t=t.default);var d,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),r&&(u._scopeId=r),a?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=d):o&&(d=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),d)if(u.functional){u._injectStyles=d;var c=u.render;u.render=function(t,e){return d.call(e),c(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,d):[d]}return{exports:t,options:u}}n.d(e,"a",function(){return i})},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var o=(a=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),r=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[n].concat(r).concat([o]).join("\n")}var a;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&i[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return b});var i=n(9),o=n.n(i),r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},s=r&&(document.head||document.getElementsByTagName("head")[0]),l=null,d=0,u=!1,c=function(){},f=null,h="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function b(t,e,n,i){u=n,f=i||{};var r=o()(t,e);return m(r),function(e){for(var n=[],i=0;i<r.length;i++){var s=r[i];(l=a[s.id]).refs--,n.push(l)}e?m(r=o()(t,e)):r=[];for(i=0;i<n.length;i++){var l;if(0===(l=n[i]).refs){for(var d=0;d<l.parts.length;d++)l.parts[d]();delete a[l.id]}}}}function m(t){for(var e=0;e<t.length;e++){var n=t[e],i=a[n.id];if(i){i.refs++;for(var o=0;o<i.parts.length;o++)i.parts[o](n.parts[o]);for(;o<n.parts.length;o++)i.parts.push(g(n.parts[o]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var r=[];for(o=0;o<n.parts.length;o++)r.push(g(n.parts[o]));a[n.id]={id:n.id,refs:1,parts:r}}}}function v(){var t=document.createElement("style");return t.type="text/css",s.appendChild(t),t}function g(t){var e,n,i=document.querySelector("style["+h+'~="'+t.id+'"]');if(i){if(u)return c;i.parentNode.removeChild(i)}if(p){var o=d++;i=l||(l=v()),e=x.bind(null,i,o,!1),n=x.bind(null,i,o,!0)}else i=v(),e=function(t,e){var n=e.css,i=e.media,o=e.sourceMap;i&&t.setAttribute("media",i);f.ssrId&&t.setAttribute(h,e.id);o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var y,C=(y=[],function(t,e){return y[t]=e,y.filter(Boolean).join("\n")});function x(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=C(e,o);else{var r=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i,o=n(16),r=(i=o)&&i.__esModule?i:{default:i};e.default={name:"snb-table",components:{TableContent:r.default},props:{data:{type:Array,default:function(){return[]}},defaultSort:{type:Object,default:function(){}},sortState:{type:Object,default:function(){}},headerFixed:{type:Object,default:function(){}},headerColsWidth:{type:Array,default:function(){return[]}},showHeader:{type:Boolean,default:!0}},data:function(){return{hasFixedCell:!1,tableWrapperWidth:0,colsWidth:[],sort:{prop:"",order:"",defaultProp:""},rows:[],panes:[],distanX:0}},computed:{leftColumnWidth:function(){return this.colsWidth.length&&1*this.colsWidth[0]||0},inHeaderFixed:function(){return(this.headerFixed||{}).state},fixedTopStyle:function(){var t={};return this.inHeaderFixed&&(t.position="fixed",t.left=0,t.top=(this.headerFixed.top||0)+"px",t.zIndex=20),t}},created:function(){this.sort.prop=this.defaultSort?this.defaultSort.prop:"",this.sort.order=this.defaultSort?this.defaultSort.order:"",this.sort.defaultProp=this.defaultSort?this.defaultSort.prop:""},mounted:function(){this.calcPaneInstances(),this.mapDataToRows(),this.headerColsWidth&&this.headerColsWidth.length&&this.emitColsWidth()},methods:{calcPaneInstances:function(){var t=this;if(this.$slots.default){var e=this.$slots.default.filter(function(t){return t.tag&&t.componentOptions&&("snb-table-column"===t.componentOptions.Ctor.options.name||"SnbTableColumn"===t.componentOptions.tag)}).map(function(t){return t.componentInstance});!(e.length===this.panes.length&&e.every(function(e,n){return e===t.panes[n]}))&&this.reductionColumns(e)}else 0!==this.panes.length&&this.reductionColumns()},reductionColumns:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=[],n=null;t&&t.length&&(t.map(function(t){t.fixed&&!n?n=t||{}:e.push(t)}),n&&e.unshift(n)),this.panes=e,this.$emit("columnsReady",e),this.hasFixedCell=!!n},mapDataToRows:function(){var t=this.data,e=0;this.rows=t.map(function(t){return t.__vue_item_id=e++,t})},handleHeadSortClick:function(t){this.sort.prop!==t.prop?(this.sort.prop=t.prop,this.sort.order="asc"):this.sort.order=this.sort.order||"asc",this.$emit("sortChange",this.sort,t)},setColsWidth:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.colsWidth=t,this.emitColsWidth()},emitColsWidth:function(){var t=this.colsWidth;if(t&&t.length){var e=this.headerColsWidth;if(e&&e.length){var n=[];t.map(function(i,o){n[o]=Math.max(e[o]||0,t[o]||0)}),this.colsWidth=n,this.$emit("colsWidth",n),this.translateChange(this.distanX)}else this.$emit("colsWidth",t)}},translateChange:function(t){this.distanX=t,this.$emit("distanXChange",t)},rowClick:function(t){this.$emit("rowClick",t)}},watch:{data:function(){this.mapDataToRows()},sortState:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.sort.order=t.order||this.defaultSort.order||""},headerColsWidth:function(){this.emitColsWidth()}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=r(n(25)),o=r(n(28));function r(t){return t&&t.__esModule?t:{default:t}}e.default={name:"snb-table-thead",components:{TableColumnHeader:i.default,TableRow:o.default},props:{contentType:{type:String,default:""},showHeader:{type:Boolean,default:!0},panes:{type:Array,default:function(){return[]}},rows:{type:Array,default:function(){return[]}},sort:{type:Object,default:function(){}},colsWidth:{type:Array,default:function(){return[]}},distanX:{type:Number,default:0}},data:function(){return{tableContnt:null,tableWrapperWidth:0,leftColumnWidth:0,direction:null,isAnimation:!1,start:{x:null,y:null},end:{x:null,y:null},distan:{x:0,y:0}}},computed:{tableWidth:function(){if(!this.colsWidth.length)return Math.ceil(this.tableWrapperWidth);var t=0;return this.colsWidth.map(function(e){t+=1*e}),t=t?t+1:t,Math.ceil(Math.max(t,this.tableWrapperWidth))},overflowWidth:function(){return Math.ceil(Math.max(this.tableWidth-this.tableWrapperWidth,0))},isScrollTable:function(){return this.tableWidth<=this.tableWrapperWidth}},created:function(){},mounted:function(){this.tableContnt=this.$refs.tableContnt,this.setTableWrapperWidth(),this.getHeaderCellsWidth()},methods:{setTableWrapperWidth:function(){var t=this;this.$nextTick(function(){t.tableWrapperWidth=t.$refs.tableWrapper&&t.$refs.tableWrapper.offsetWidth||0})},setCellElWidth:function(t){this.leftColumnWidth=1*t},setColsWidth:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];"body"===this.contentType&&this.$emit("colsWidth",t)},getHeaderCellsWidth:function(){var t=this;this.$refs.tableTheaderWrapper&&this.$nextTick(function(){for(var e=[],n=t.$refs.tableTheaderWrapper.querySelectorAll(".table-column"),i=0;i<n.length;i++)e.push(n[i].offsetWidth);t.$emit("headerColsWidth",e)})},handleHeadSortClick:function(t){this.$emit("handleHeadSortClick",t)},setTableDistanX:function(){"leftFixed"!==this.contentType&&(this.tableContnt.style.transform="translateX("+this.distanX+"px)",this.tableContnt.style.transition="none")},mousedownHandle:function(t){this.startHandle(t)},mousemoveHandle:function(t){this.moveHandle(t)},mouseupHandle:function(t){this.endHandle(t)},touchStartHandle:function(t){var e=t.touches[0];this.startHandle(e)},touchMoveHandle:function(t){var e=t.touches[0];this.moveHandle(e)},touchEndHandle:function(t){var e=t.changedTouches[0];this.endHandle(e)},onTransitionEnd:function(){this.isAnimation=!1},startHandle:function(t){"body"===this.contentType&&(this.isAnimation=!0,this.start.x=t.pageX,this.start.y=t.pageY)},moveHandle:function(t){if("body"===this.contentType&&this.isAnimation&&(this.end.x=t.pageX,this.end.y=t.pageY,this.getTouchDirection(this.end.x-this.start.x,this.end.y-this.start.y),this.direction)){var e=this.end.x-this.start.x;e=Math.min(this.distan.x+e,0),e=Math.max(-1*this.overflowWidth,e),this.$emit("translateChange",e,this.contentType)}},endHandle:function(t){if("body"===this.contentType){this.isAnimation=!1,this.end.x=t.pageX;var e=this.distan.x+(this.end.x-this.start.x);e=Math.min(e,0),e=Math.max(-1*this.overflowWidth,e),this.distan.x=e}},getAngle:function(t,e){return 180*Math.atan2(e,t)/Math.PI},getTouchDirection:function(t,e){if(Math.abs(t)>5){var n=this.getAngle(t,e);n>=-45&&n<=45?this.direction="right":(n>=135&&n<=180||n>=-180&&n<-135)&&(this.direction="left")}else this.direction=null},rowClick:function(t){this.$emit("rowClick",t)}},watch:{distanX:function(){this.setTableDistanX()}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"snb-table-column-header",props:{column:{type:Object,default:function(){}},sort:{type:Object,default:function(){}}},data:function(){return{}},computed:{isSortCell:function(){return!!this.sort&&(this.column.sortable||this.sort.prop===this.column.prop||this.sort.defaultProp===this.column.prop)},isAscending:function(){return this.sort&&this.sort.prop===this.column.prop&&"asc"===this.sort.order},isDescending:function(){return this.sort&&this.sort.prop===this.column.prop&&"desc"===this.sort.order}},created:function(){},mounted:function(){},methods:{handleClick:function(){this.isSortCell&&this.$emit("handleHeadSortClick",this.column)}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i,o=n(29),r=(i=o)&&i.__esModule?i:{default:i};e.default={name:"snb-table-row",components:{TableCell:r.default},props:{columns:{type:Array,default:function(){return[]}},row:{type:Object,default:function(){}},isLastRow:{type:Boolean,default:!1}},data:function(){return{}},computed:{},created:function(){},mounted:function(){this.getCellsWidth()},methods:{getCellsWidth:function(){var t=this;this.isLastRow&&this.$nextTick(function(){for(var e=[],n=t.$refs.tableTrWrapper.querySelectorAll(".table-column"),i=0;i<n.length;i++)e.push(n[i].offsetWidth);t.$emit("colsWidth",e)})},minWidth:function(t){if(t)return{"min-width":t+"px"}},rowClick:function(){this.$emit("rowClick",this.row)}},watch:{columns:function(){this.isLastRow&&this.getCellsWidth()}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{prop:{default:null,type:String},label:{default:null,type:String},align:{default:null,type:String},width:{default:null,type:String},sortable:{default:!1,type:Boolean},fixed:{default:!1,type:Boolean},formatter:{default:function(t){return t},type:Function}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i,o=n(16),r=(i=o)&&i.__esModule?i:{default:i};e.default={name:"snb-table-header",components:{TableContent:r.default},props:{columns:{type:Array,default:function(){return[]}},colsWidth:{type:Array,default:function(){return[]}},distanX:{type:Number,default:0},defaultSort:{type:Object,default:function(){}},sortState:{type:Object,default:function(){}}},data:function(){return{hasFixedCell:!1,tableWrapperWidth:0,sort:{prop:"",order:"",defaultProp:""},rows:[],panes:[]}},computed:{leftColumnWidth:function(){return this.colsWidth.length&&1*this.colsWidth[0]||0}},created:function(){this.sort.prop=this.defaultSort?this.defaultSort.prop:"",this.sort.order=this.defaultSort?this.defaultSort.order:"",this.sort.defaultProp=this.defaultSort?this.defaultSort.prop:""},mounted:function(){this.reductionColumns(this.columns)},methods:{reductionColumns:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=[],n=null;t&&t.length&&(t.map(function(t){t.fixed&&!n?n=t||{}:e.push(t)}),n&&e.unshift(n)),this.hasFixedCell=!!n},handleHeadSortClick:function(t){this.sort.prop!==t.prop?(this.sort.prop=t.prop,this.sort.order="desc"):this.sort.order=this.sort.order||"desc",this.$emit("sortChange",this.sort)},setHeaderColsWidth:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];this.$emit("headerColsWidth",t)}},watch:{columns:function(t){this.reductionColumns(t)},sortState:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.sort.order=t.order||this.defaultSort.order||""}}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){for(var n=[],i={},o=0;o<e.length;o++){var r=e[o],a=r[0],s=r[1],l=r[2],d=r[3],u={id:t+":"+o,css:s,media:l,sourceMap:d};i[a]?i[a].parts.push(u):n.push(i[a]={id:a,parts:[u]})}return n}},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("th",{ref:"elColumn",class:[t.column.align?"is-"+t.column.align:"",t.isAscending?"ascending":"",t.isDescending?"descending":""],on:{click:t.handleClick}},[n("div",{staticClass:"cell"},[t._v(t._s(t.column.label)+" "),t.isSortCell?n("span",{staticClass:"caret-wrapper"},[n("i",{staticClass:"sort-caret ascending"}),n("i",{staticClass:"sort-caret descending"})]):t._e()])])},o=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("tr",{ref:"tableTrWrapper"},t._l(t.columns,function(e,i){return n("td",{key:e.type,class:["table-column",e.align?"is-"+e.align:"",0===i?"first-table-column":"",i===t.columns.length-1?"last-table-column":""],style:t.minWidth(e.width),on:{click:t.rowClick}},[n("TableCell",{attrs:{colspan:i,row:t.row,column:e}})],1)}))},o=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"tableWrapper",staticClass:"table-wrapper"},[n("table",{ref:"tableContnt",style:{width:t.tableWidth+"px"},on:{touchstart:t.touchStartHandle,touchmove:t.touchMoveHandle,touchend:t.touchEndHandle,mousemove:t.mousemoveHandle,mouseup:t.mouseupHandle,mousedown:t.mousedownHandle,"webkit-transition-end":function(e){t.onTransitionEnd()},transitionend:function(e){t.onTransitionEnd()}}},[n("colgroup",t._l(t.colsWidth,function(t,e){return n("col",{key:e,attrs:{width:t}})})),t._v(" "),t.showHeader?n("thead",[n("tr",{ref:"tableTheaderWrapper"},t._l(t.panes,function(e,i){return n("table-column-header",{key:e.prop+i,class:["table-column",0===i?"first-table-column":"",i===t.panes.length-1?"last-table-column":""],attrs:{column:e,sort:t.sort},on:{handleHeadSortClick:t.handleHeadSortClick}})}))]):t._e(),t._v(" "),"header"!==t.contentType?n("tbody",t._l(t.rows,function(e,i){return n("table-row",{key:e.__vue_item_id,attrs:{row:e,columns:t.panes,isLastRow:i===t.rows.length-1},on:{colsWidth:t.setColsWidth,rowClick:t.rowClick}})})):t._e()])])},o=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"ui-snb-table"},[n("div",{staticClass:"table-fixed"},[t.showHeader&&(t.hasFixedCell||t.inHeaderFixed)?n("table-content",{staticClass:"table-fixed-top",class:{"in-fixed-header":t.inHeaderFixed},style:t.fixedTopStyle,attrs:{contentType:"header",panes:t.panes,sort:t.sort,colsWidth:t.colsWidth,distanX:t.distanX,rows:t.rows},on:{handleHeadSortClick:t.handleHeadSortClick,translateChange:t.translateChange}}):t._e(),t._v(" "),t.hasFixedCell?n("table-content",{staticClass:"table-fixed-left",class:{"in-fixed-table":Math.abs(t.distanX)>5},style:{width:t.leftColumnWidth+"px"},attrs:{contentType:"leftFixed",showHeader:t.showHeader,panes:t.panes,sort:t.sort,colsWidth:t.colsWidth,distanX:t.distanX,rows:t.rows},on:{handleHeadSortClick:t.handleHeadSortClick,translateChange:t.translateChange,rowClick:t.rowClick}}):t._e()],1),t._v(" "),n("table-content",{attrs:{contentType:"body",showHeader:t.showHeader,panes:t.panes,sort:t.sort,colsWidth:t.colsWidth,distanX:t.distanX,rows:t.rows},on:{handleHeadSortClick:t.handleHeadSortClick,colsWidth:t.setColsWidth,translateChange:t.translateChange,rowClick:t.rowClick}}),t._v(" "),n("div",{staticClass:"hidden-columns"},[t._t("default")],2)],1)},o=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this.$createElement;this._self._c;return this._e()},o=[]},function(t,e,n){"use strict";n.d(e,"a",function(){return i}),n.d(e,"b",function(){return o});var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"ui-snb-table"},[n("div",{staticClass:"table-fixed"},[n("table-content",{staticClass:"table-top",attrs:{contentType:"header",panes:t.columns,sort:t.sort,colsWidth:t.colsWidth,distanX:t.distanX},on:{headerColsWidth:t.setHeaderColsWidth,handleHeadSortClick:t.handleHeadSortClick}}),t._v(" "),t.hasFixedCell?n("table-content",{staticClass:"table-fixed-left",style:{width:t.leftColumnWidth+"px"},attrs:{contentType:"leftFixed",showHeader:!0,panes:t.columns,sort:t.sort,colsWidth:t.colsWidth,distanX:t.distanX},on:{handleHeadSortClick:t.handleHeadSortClick}}):t._e()],1)])},o=[]},function(t,e,n){"use strict";n.r(e);var i=n(4),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(12),s=n(0);var l=function(t){n(23)},d=Object(s.a)(o.a,a.a,a.b,!1,l,null,null);e.default=d.exports},,,function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SnbTableHeader=e.SnbTableColumn=e.SnbTable=void 0;var i=a(n(20)),o=a(n(30)),r=a(n(31));function a(t){return t&&t.__esModule?t:{default:t}}e.SnbTable=i.default,e.SnbTableColumn=o.default,e.SnbTableHeader=r.default},function(t,e,n){"use strict";n.r(e);var i=n(3),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(13),s=n(0);var l=function(t){n(21)},d=Object(s.a)(o.a,a.a,a.b,!1,l,null,null);e.default=d.exports},function(t,e,n){var i=n(22);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("1a187d27",i,!0,{})},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,"table{border-collapse:collapse;border-spacing:0}.ui-snb-table{position:relative;width:100%;overflow:hidden}.ui-snb-table .table-fixed .table-fixed-top{position:absolute;left:0;top:0;z-index:8;overflow:hidden;width:100%}.ui-snb-table .table-fixed .table-fixed-left{position:absolute;left:0;top:0;z-index:9;overflow:hidden}.ui-snb-table .table-fixed .table-fixed-left.in-fixed-table{box-shadow:0 0 5px rgba(0,0,0,.12)}.ui-snb-table .hidden-columns{display:none}.ui-snb-table td,.ui-snb-table th{margin:0;padding:0;white-space:nowrap;border:1px solid #ebeef5;text-align:left}.ui-snb-table td .cell,.ui-snb-table th .cell{padding:10px 5px}.ui-snb-table tbody td,.ui-snb-table tbody th{background:#fff}.ui-snb-table thead td,.ui-snb-table thead th{background:#f5f7fa}.ui-snb-table .is-left{text-align:left}.ui-snb-table .is-right{text-align:right}.ui-snb-table .is-center{text-align:center}",""])},function(t,e,n){var i=n(24);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("032f5d02",i,!0,{})},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,".table-wrapper{width:100%;overflow:hidden}",""])},function(t,e,n){"use strict";n.r(e);var i=n(5),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(10),s=n(0);var l=function(t){n(26)},d=Object(s.a)(o.a,a.a,a.b,!1,l,null,null);e.default=d.exports},function(t,e,n){var i=n(27);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("47dc5156",i,!0,{})},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,".caret-wrapper{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:12px;height:22px;vertical-align:middle;overflow:hidden}.sort-caret{position:absolute;left:1px;width:0;height:0;border:5px solid transparent}.sort-caret.ascending{border-bottom-color:#c0c4cc;top:0}.sort-caret.descending{border-top-color:#c0c4cc;bottom:0}th.ascending .sort-caret.ascending{border-bottom-color:#f75b5b}th.descending .sort-caret.descending{border-top-color:#6282fb}",""])},function(t,e,n){"use strict";n.r(e);var i=n(6),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(11),s=n(0),l=Object(s.a)(o.a,a.a,a.b,!1,null,null,null);e.default=l.exports},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={functional:!0,props:["column","row","colspan"],render:function(t,e){var n=e.props,i=n.column,o={class:"cell"};return i.$scopedSlots.default?t("div",o,i.$scopedSlots.default(n.row)):(o.domProps={},o.domProps.innerHTML=n.column.formatter(n.row[i.prop],n.row.data),t("div",o))}}},function(t,e,n){"use strict";n.r(e);var i=n(7),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(14),s=n(0),l=Object(s.a)(o.a,a.a,a.b,!1,null,null,null);e.default=l.exports},function(t,e,n){"use strict";n.r(e);var i=n(8),o=n.n(i);for(var r in i)"default"!==r&&function(t){n.d(e,t,function(){return i[t]})}(r);var a=n(15),s=n(0);var l=function(t){n(32)},d=Object(s.a)(o.a,a.a,a.b,!1,l,null,null);e.default=d.exports},function(t,e,n){var i=n(33);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("6035e855",i,!0,{})},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,".ui-snb-table{position:relative;width:100%;overflow:hidden}.ui-snb-table .table-fixed .table-fixed-top{position:absolute;left:0;top:0;z-index:8;overflow:hidden;width:100%}.ui-snb-table .table-fixed .table-fixed-left{position:absolute;left:0;top:0;z-index:9;overflow:hidden}.ui-snb-table .table-fixed .table-fixed-left.in-fixed-table{box-shadow:0 0 5px rgba(0,0,0,.12)}.ui-snb-table .hidden-columns{display:none}.ui-snb-table td,.ui-snb-table th{margin:0;padding:0;white-space:nowrap;border:1px solid #ccc;text-align:left}.ui-snb-table td .cell,.ui-snb-table th .cell{padding:10px 5px}.ui-snb-table tbody td,.ui-snb-table tbody th{background:#fff}.ui-snb-table thead td,.ui-snb-table thead th{background:#f5f7fa}.ui-snb-table .is-left{text-align:left}.ui-snb-table .is-right{text-align:right}.ui-snb-table .is-center{text-align:center}",""])}])});


--------------------------------------------------------------------------------