├── docs
    ├── .vuepress
    │   ├── .gitignore
    │   ├── components
    │   │   ├── demo-block
    │   │   │   ├── i18n.json
    │   │   │   └── demo-block.vue
    │   │   └── example
    │   │   │   └── zh
    │   │   │       ├── fixed-header-table.vue
    │   │   │       ├── basis-table.vue
    │   │   │       ├── border-table.vue
    │   │   │       ├── stripe-table.vue
    │   │   │       ├── custom-index-table.vue
    │   │   │       ├── sort-table.vue
    │   │   │       ├── fluid-height-table.vue
    │   │   │       ├── status-table.vue
    │   │   │       ├── radio-table.vue
    │   │   │       ├── pagination-table.vue
    │   │   │       ├── multiple-table.vue
    │   │   │       ├── fixed-column-table.vue
    │   │   │       ├── multi-header-table.vue
    │   │   │       ├── render-header-table.vue
    │   │   │       ├── align-table.vue
    │   │   │       ├── render-table.vue
    │   │   │       ├── merge-row-column-table.vue
    │   │   │       ├── filter-table.vue
    │   │   │       ├── edit-dialog-table.vue
    │   │   │       ├── footer-total-table.vue
    │   │   │       ├── expand-row-table.vue
    │   │   │       ├── tree-table.vue
    │   │   │       ├── merge-table.vue
    │   │   │       └── edit-table.vue
    │   ├── enhanceApp.js
    │   └── config.js
    └── zh
    │   ├── README.md
    │   └── guide
    │       └── README.md
├── .browserslistrc
├── vue.config.js
├── babel.config.js
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── main.js
    ├── components
    │   ├── lb-table
    │   │   ├── lb-render.vue
    │   │   ├── forced.js
    │   │   ├── lb-column.vue
    │   │   └── lb-table.vue
    │   └── HelloWorld.vue
    └── App.vue
├── .editorconfig
├── .travis.yml
├── .gitignore
├── .eslintrc.js
├── deploy.sh
├── package.json
└── README.md


/docs/.vuepress/.gitignore:
--------------------------------------------------------------------------------
1 | /dist
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | // vue.config.js
2 | module.exports = {
3 | 
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liub1934/lb-element-table/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/liub1934/lb-element-table/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/demo-block/i18n.json:
--------------------------------------------------------------------------------
1 | [{
2 |   "lang": "zh",
3 |   "demo-block": {
4 |     "hide-text": "隐藏代码",
5 |     "show-text": "显示代码",
6 |     "button-text": "在线运行",
7 |     "tooltip-text": "前往 codepen.io 运行此示例"
8 |   }
9 | }]


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: required
 3 | node_js:
 4 |   - "8.11.0"
 5 | before_install:
 6 |   - chmod +x deploy.sh
 7 | script:
 8 |   - ./deploy.sh
 9 | branch: master
10 | cache:
11 |   directories:
12 |     - node_modules
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | 
 6 | Vue.use(ElementUI)
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | new Vue({
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/docs/zh/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | home: true
 3 | actionText: 快速上手 →
 4 | actionLink: /zh/guide/
 5 | features:
 6 | - title: 简洁至上
 7 |   details: 以 element-ui table为基础进行二次封装，减少代码量
 8 | - title: 原参数
 9 |   details: 使用原有element table的参数及事件，还是熟悉的味道。
10 | - title: 99%支持度
11 |   details: 支持几乎所有的事件及参数，新增其他某些功能。
12 | footer: MIT Licensed | Copyright © 2018-present Evan You
13 | ---


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <div class="home">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from '@/components/HelloWorld.vue'
11 | 
12 | export default {
13 |   name: 'home',
14 |   components: {
15 |     HelloWorld
16 |   }
17 | }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/docs/.vuepress/enhanceApp.js:
--------------------------------------------------------------------------------
 1 | import Element from 'element-ui'
 2 | import LbTable from '../../src/components/lb-table/lb-table'
 3 | import DemoBlock from './components/demo-block/demo-block'
 4 | import 'element-ui/lib/theme-chalk/index.css'
 5 | export default ({
 6 |   Vue, // VuePress 正在使用的 Vue 构造函数
 7 |   options, // 附加到根实例的一些选项
 8 |   router, // 当前应用的路由实例
 9 |   siteData // 站点元数据
10 | }) => {
11 |   Vue.use(Element)
12 |   Vue.component('lb-table', LbTable)
13 |   Vue.component('demo-block', DemoBlock)
14 | }
15 | 


--------------------------------------------------------------------------------
/src/components/lb-table/lb-render.vue:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * FileName: lb-render.vue
 3 |  * Remark: 自定义render
 4 |  * Project: lb-element-table
 5 |  * Author: LiuBing
 6 |  * File Created: Tuesday, 19th March 2019 10:15:30 am
 7 |  * Last Modified: Tuesday, 19th March 2019 10:15:32 am
 8 |  * Modified By: LiuBing
 9 |  */
10 | <script>
11 | export default {
12 |   name: 'LbRender',
13 |   functional: true,
14 |   props: {
15 |     scope: Object,
16 |     render: Function
17 |   },
18 |   render: (h, ctx) => {
19 |     return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img alt="Vue logo" src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from './components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'app',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/public/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">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>lb-element-table</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but lb-element-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # 确保脚本抛出遇到的错误
 4 | set -e
 5 | 
 6 | # 生成静态文件
 7 | npm run docs:build
 8 | 
 9 | # 进入生成的文件夹
10 | cd docs/.vuepress/dist
11 | 
12 | # 如果是发布到自定义域名
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | git config --local user.name "liub1934"
20 | git config --local user.email "liub1934@gmail.com"
21 | 
22 | # 如果发布到 https://<USERNAME>.github.io
23 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
24 | 
25 | # 如果发布到 https://<USERNAME>.github.io/<REPO>
26 | git push -f https://${access_token}@github.com/liub1934/lb-element-table.git master:gh-pages
27 | 
28 | cd -


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   base: '/lb-element-table/',
 3 |   locales: {
 4 |     '/zh/': {
 5 |       lang: 'zh-CN',
 6 |       title: 'lb-element-table',
 7 |       description: '基于element ui table二次封装，几乎支持原table所有的功能。'
 8 |     }
 9 |   },
10 |   themeConfig: {
11 |     repo: 'liub1934/lb-element-table',
12 |     docsDir: 'docs',
13 |     locales: {
14 |       '/zh/': {
15 |         label: '简体中文',
16 |         selectText: '选择语言',
17 |         nav: [{
18 |             text: '主页',
19 |             link: '/zh/'
20 |           },
21 |           {
22 |             text: '指南',
23 |             link: '/zh/guide/'
24 |           },
25 |           {
26 |             text: '个人小站',
27 |             link: 'https://liubing.me'
28 |           }
29 |         ]
30 |       }
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/fixed-header-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="column"
 3 |     :data="data"
 4 |     border
 5 |     height="250">
 6 |   </lb-table>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   data () {
12 |     return {
13 |       column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期'
17 |           },
18 |           {
19 |             prop: 'name',
20 |             label: '姓名'
21 |           },
22 |           {
23 |             prop: 'address',
24 |             label: '地址'
25 |           }
26 |         ],
27 |         data: []
28 |     }
29 |   },
30 |   created () {
31 |     for (let i = 0; i < 20; i++) {
32 |       this.data.push({
33 |         date: `2016-05-${i + 1}`,
34 |         name: `王小虎${i + 1}`,
35 |         address: `上海市普陀区金沙江路 ${i + 1} 弄`
36 |       })
37 |     }
38 |   }
39 | }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lb-element-table",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "docs:dev": "vuepress dev docs",
10 |     "docs:build": "vuepress build docs"
11 |   },
12 |   "dependencies": {
13 |     "element-ui": "^2.9.1",
14 |     "highlight.js": "^9.15.6",
15 |     "vue": "^2.6.6",
16 |     "vue-highlight.js": "^3.1.0",
17 |     "webpack-dev-middleware": "^3.6.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "^3.5.0",
21 |     "@vue/cli-plugin-eslint": "^3.5.0",
22 |     "@vue/cli-service": "^3.5.0",
23 |     "@vue/eslint-config-standard": "^4.0.0",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.8.0",
26 |     "eslint-plugin-vue": "^5.0.0",
27 |     "node-sass": "^4.11.0",
28 |     "sass-loader": "^7.1.0",
29 |     "vue-template-compiler": "^2.5.21",
30 |     "vuepress": "^0.14.10"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lb-element-table
 2 | 
 3 | > 不要使用`propColumn`，现已删除，Demo一直未更新。<br>
 4 | > Do not use `propColumn`, it has been deleted, the demo has not been updated
 5 | 
 6 | Demo：[Go](https://github.liubing.me/lb-element-table/zh/guide/)
 7 | 
 8 | How to Use:
 9 | 
10 | Find `lb-table` in `src/components` And Copy it to your own project, then import it, and change it freely according to your needs.
11 | 
12 | 在`src/components`目录中找到`lb-table`，复制到自己的项目中，然后引用，可以根据自己的需求自由更改。
13 | 
14 | ## Project setup
15 | ```
16 | npm install
17 | ```
18 | 
19 | ### Compiles and hot-reloads for development
20 | ```
21 | npm run serve
22 | ```
23 | 
24 | ### Compiles and hot-reloads for docs
25 | `/lb-element-table/zh/guide/`
26 | ```
27 | npm run docs:dev
28 | ```
29 | 
30 | ### Compiles and minifies for production
31 | ```
32 | npm run build
33 | ```
34 | 
35 | ### Compiles and minifies for docs
36 | ```
37 | npm run docs:build
38 | ```
39 | 
40 | ### Lints and fixes files
41 | ```
42 | npm run lint
43 | ```
44 | 
45 | ### Customize configuration
46 | See [Configuration Reference](https://cli.vuejs.org/config/).
47 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/basis-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data">
 4 |   </lb-table>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       tableData: {
12 |         column: [
13 |           {
14 |             prop: 'date',
15 |             label: '日期'
16 |           },
17 |           {
18 |             prop: 'name',
19 |             label: '姓名'
20 |           },
21 |           {
22 |             prop: 'address',
23 |             label: '地址'
24 |           }
25 |         ],
26 |         data: [
27 |           {
28 |             date: '2016-05-02',
29 |             name: '王小虎1',
30 |             address: '上海市普陀区金沙江路 1518 弄'
31 |           },
32 |           {
33 |             date: '2016-05-02',
34 |             name: '王小虎2',
35 |             address: '上海市普陀区金沙江路 1518 弄'
36 |           },
37 |           {
38 |             date: '2016-05-02',
39 |             name: '王小虎3',
40 |             address: '上海市普陀区金沙江路 1518 弄'
41 |           }
42 |         ]
43 |       }
44 |     }
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/border-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table border
 3 |     :column="tableData.column"
 4 |     :data="tableData.data">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期'
17 |           },
18 |           {
19 |             prop: 'name',
20 |             label: '姓名'
21 |           },
22 |           {
23 |             prop: 'address',
24 |             label: '地址'
25 |           }
26 |         ],
27 |         data: [
28 |           {
29 |             date: '2016-05-02',
30 |             name: '王小虎1',
31 |             address: '上海市普陀区金沙江路 1518 弄'
32 |           },
33 |           {
34 |             date: '2016-05-02',
35 |             name: '王小虎2',
36 |             address: '上海市普陀区金沙江路 1518 弄'
37 |           },
38 |           {
39 |             date: '2016-05-02',
40 |             name: '王小虎3',
41 |             address: '上海市普陀区金沙江路 1518 弄'
42 |           }
43 |         ]
44 |       }
45 |     }
46 |   }
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/stripe-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table stripe
 3 |     :column="tableData.column"
 4 |     :data="tableData.data">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期'
17 |           },
18 |           {
19 |             prop: 'name',
20 |             label: '姓名'
21 |           },
22 |           {
23 |             prop: 'address',
24 |             label: '地址'
25 |           }
26 |         ],
27 |         data: [
28 |           {
29 |             date: '2016-05-02',
30 |             name: '王小虎1',
31 |             address: '上海市普陀区金沙江路 1518 弄'
32 |           },
33 |           {
34 |             date: '2016-05-02',
35 |             name: '王小虎2',
36 |             address: '上海市普陀区金沙江路 1518 弄'
37 |           },
38 |           {
39 |             date: '2016-05-02',
40 |             name: '王小虎3',
41 |             address: '上海市普陀区金沙江路 1518 弄'
42 |           }
43 |         ]
44 |       }
45 |     }
46 |   }
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/custom-index-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data">
 4 |   </lb-table>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       tableData: {
12 |         column: [
13 |           {
14 |             type: 'index',
15 |             index: this.indexMethod
16 |           },
17 |           {
18 |             prop: 'date',
19 |             label: '日期'
20 |           },
21 |           {
22 |             prop: 'name',
23 |             label: '姓名'
24 |           },
25 |           {
26 |             prop: 'address',
27 |             label: '地址'
28 |           }
29 |         ],
30 |         data: [
31 |           {
32 |             date: '2016-05-02',
33 |             name: '王小虎1',
34 |             address: '上海市普陀区金沙江路 1518 弄'
35 |           },
36 |           {
37 |             date: '2016-05-02',
38 |             name: '王小虎2',
39 |             address: '上海市普陀区金沙江路 1518 弄'
40 |           },
41 |           {
42 |             date: '2016-05-02',
43 |             name: '王小虎3',
44 |             address: '上海市普陀区金沙江路 1518 弄'
45 |           }
46 |         ]
47 |       }
48 |     }
49 |   },
50 |   methods: {
51 |     indexMethod (index) {
52 |       return index * 2
53 |     }
54 |   }
55 | }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/sort-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <lb-table ref="multipleTable"
 4 |       :column="tableData.column"
 5 |       :data="tableData.data"
 6 |       :default-sort = "{prop: 'date', order: 'descending'}">
 7 |     </lb-table>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       tableData: {
16 |         column: [
17 |           {
18 |             prop: 'date',
19 |             label: '日期',
20 |             sortable: true
21 |           },
22 |           {
23 |             prop: 'name',
24 |             label: '姓名'
25 |           },
26 |           {
27 |             prop: 'address',
28 |             label: '地址',
29 |             formatter: this.formatter
30 |           }
31 |         ],
32 |         data: [
33 |           {
34 |             date: '2016-05-01',
35 |             name: '王小虎1',
36 |             address: '上海市普陀区金沙江路 1511 弄'
37 |           },
38 |           {
39 |             date: '2016-05-02',
40 |             name: '王小虎2',
41 |             address: '上海市普陀区金沙江路 1512 弄'
42 |           },
43 |           {
44 |             date: '2016-05-03',
45 |             name: '王小虎3',
46 |             address: '上海市普陀区金沙江路 1513 弄'
47 |           }
48 |         ]
49 |       },
50 |       multipleSelection: []
51 |     }
52 |   },
53 |   methods: {
54 |     formatter(row) {
55 |       return row.address + '-formatter'
56 |     }
57 |   }
58 | }
59 | </script>
60 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/fluid-height-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data"
 4 |     max-height="250">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期',
17 |             width: '150',
18 |             fixed: true
19 |           },
20 |           {
21 |             prop: 'name',
22 |             label: '姓名',
23 |             width: '120'
24 |           },
25 |           {
26 |             prop: 'province',
27 |             label: '省份',
28 |             width: '120'
29 |           },
30 |           {
31 |             prop: 'city',
32 |             label: '市区',
33 |             width: '120'
34 |           },
35 |           {
36 |             prop: 'address',
37 |             label: '地址',
38 |             width: '300'
39 |           },
40 |           {
41 |             prop: 'zip',
42 |             label: '邮编',
43 |             width: '120',
44 |             fixed: 'right'
45 |           }
46 |         ],
47 |         data: []
48 |       }
49 |     }
50 |   },
51 |   created () {
52 |     for (let i = 0; i < 20; i++) {
53 |       this.tableData.data.push({
54 |         date: `2016-05-${i + 1}`,
55 |         name: `王小虎${i + 1}`,
56 |         province: '上海',
57 |         city: '普陀区',
58 |         address: `上海市普陀区金沙江路 ${i + 1} 弄`,
59 |         zip: 200333
60 |       })
61 |     }
62 |   }
63 | }
64 | </script>
65 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/status-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data"
 4 |     :row-class-name="tableRowClassName">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期'
17 |           },
18 |           {
19 |             prop: 'name',
20 |             label: '姓名'
21 |           },
22 |           {
23 |             prop: 'address',
24 |             label: '地址'
25 |           }
26 |         ],
27 |         data: [
28 |           {
29 |             date: '2016-05-02',
30 |             name: '王小虎1',
31 |             address: '上海市普陀区金沙江路 1518 弄'
32 |           },
33 |           {
34 |             date: '2016-05-02',
35 |             name: '王小虎2',
36 |             address: '上海市普陀区金沙江路 1518 弄'
37 |           },
38 |           {
39 |             date: '2016-05-02',
40 |             name: '王小虎3',
41 |             address: '上海市普陀区金沙江路 1518 弄'
42 |           },
43 |           {
44 |             date: '2016-05-02',
45 |             name: '王小虎4',
46 |             address: '上海市普陀区金沙江路 1518 弄'
47 |           }
48 |         ]
49 |       }
50 |     }
51 |   },
52 |   methods: {
53 |     tableRowClassName ({ row, rowIndex }) {
54 |       if (rowIndex === 1) {
55 |         return 'warning-row'
56 |       } else if (rowIndex === 3) {
57 |         return 'success-row'
58 |       }
59 |       return ''
60 |     }
61 |   }
62 | }
63 | </script>
64 | 
65 | <style>
66 | .el-table .warning-row {
67 |   background: oldlace;
68 | }
69 | 
70 | .el-table .success-row {
71 |   background: #f0f9eb;
72 | }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/radio-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <lb-table ref="lbTable"
 4 |       highlight-current-row
 5 |       :column="tableData.column"
 6 |       :data="tableData.data"
 7 |       @current-change="handleCurrentChange">
 8 |     </lb-table>
 9 |     <div style="margin-top: 20px">
10 |       <el-button @click="setCurrent(tableData.data[1])">选中第二行</el-button>
11 |       <el-button @click="setCurrent()">取消选择</el-button>
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   data () {
19 |     return {
20 |       tableData: {
21 |         column: [
22 |           {
23 |             type: 'index',
24 |             align: 'center'
25 |           },
26 |           {
27 |             prop: 'date',
28 |             label: '日期'
29 |           },
30 |           {
31 |             prop: 'name',
32 |             label: '姓名'
33 |           },
34 |           {
35 |             prop: 'address',
36 |             label: '地址'
37 |           }
38 |         ],
39 |         data: [
40 |           {
41 |             date: '2016-05-02',
42 |             name: '王小虎1',
43 |             address: '上海市普陀区金沙江路 1518 弄'
44 |           },
45 |           {
46 |             date: '2016-05-02',
47 |             name: '王小虎2',
48 |             address: '上海市普陀区金沙江路 1518 弄'
49 |           },
50 |           {
51 |             date: '2016-05-02',
52 |             name: '王小虎3',
53 |             address: '上海市普陀区金沙江路 1518 弄'
54 |           }
55 |         ]
56 |       },
57 |       currentRow: null
58 |     }
59 |   },
60 |   methods: {
61 |     setCurrent (row) {
62 |       this.$refs.lbTable.setCurrentRow(row);
63 |     },
64 |     handleCurrentChange (val) {
65 |       this.currentRow = val;
66 |     }
67 |   }
68 | }
69 | </script>
70 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/pagination-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table v-loading="loading"
 3 |     :column="tableData.column"
 4 |     :data="tableData.data"
 5 |     pagination
 6 |     background
 7 |     layout="total, sizes, prev, pager, next, jumper"
 8 |     :page-sizes="[5, 10, 20, 30]"
 9 |     :pager-count="5"
10 |     :current-page.sync="currentPage"
11 |     :total="100"
12 |     :page-size="pageSize"
13 |     @size-change="handleSizeChange"
14 |     @p-current-change="handleCurrentChange">
15 |   </lb-table>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   data () {
21 |     return {
22 |       tableData: {
23 |         column: [
24 |           {
25 |             prop: 'date',
26 |             label: '日期'
27 |           },
28 |           {
29 |             prop: 'name',
30 |             label: '姓名'
31 |           },
32 |           {
33 |             prop: 'address',
34 |             label: '地址'
35 |           }
36 |         ],
37 |         data: []
38 |       },
39 |       loading: false,
40 |       currentPage: 1,
41 |       pageSize: 5,
42 |     }
43 |   },
44 |   created () {
45 |     this.createData(this.pageSize)
46 |   },
47 |   methods: {
48 |     createData (length) {
49 |       this.loading = true
50 |       let data = []
51 |       for (let i = 0; i < length; i++) {
52 |         data.push({
53 |           date: '2016-05-02',
54 |           name: `王小虎-${this.currentPage}-${i + 1}`,
55 |           address: `上海市普陀区金沙江路 -${this.currentPage}-${i + 1} 弄`
56 |         })
57 |       }
58 |       setTimeout(() => {
59 |         this.tableData.data = data
60 |         this.loading = false
61 |       }, 1000)
62 |     },
63 |     handleSizeChange (val) {
64 |       this.currentPage = 1
65 |       this.pageSize = val
66 |       this.createData(this.pageSize)
67 |     },
68 |     handleCurrentChange () {
69 |       this.createData(this.pageSize)
70 |     }
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/multiple-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <lb-table ref="multipleTable"
 4 |       :column="tableData.column"
 5 |       :data="tableData.data"
 6 |       @selection-change="handleSelectionChange">
 7 |     </lb-table>
 8 |     <div style="margin-top: 20px">
 9 |       <el-button @click="toggleSelection([tableData.data[1], tableData.data[2]])">切换第二、第三行的选中状态</el-button>
10 |       <el-button @click="toggleSelection()">取消选择</el-button>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   data() {
18 |     return {
19 |       tableData: {
20 |         column: [
21 |           {
22 |             type: 'selection'
23 |           },
24 |           {
25 |             prop: 'date',
26 |             label: '日期'
27 |           },
28 |           {
29 |             prop: 'name',
30 |             label: '姓名'
31 |           },
32 |           {
33 |             prop: 'address',
34 |             label: '地址'
35 |           }
36 |         ],
37 |         data: [
38 |           {
39 |             date: '2016-05-02',
40 |             name: '王小虎1',
41 |             address: '上海市普陀区金沙江路 1518 弄'
42 |           },
43 |           {
44 |             date: '2016-05-02',
45 |             name: '王小虎2',
46 |             address: '上海市普陀区金沙江路 1518 弄'
47 |           },
48 |           {
49 |             date: '2016-05-02',
50 |             name: '王小虎3',
51 |             address: '上海市普陀区金沙江路 1518 弄'
52 |           }
53 |         ]
54 |       },
55 |       multipleSelection: []
56 |     }
57 |   },
58 |   methods: {
59 |     toggleSelection (rows) {
60 |       if (rows) {
61 |         rows.forEach(row => {
62 |           this.$refs.multipleTable.toggleRowSelection(row)
63 |         })
64 |       } else {
65 |         this.$refs.multipleTable.clearSelection()
66 |       }
67 |     },
68 |     handleSelectionChange (val) {
69 |       this.multipleSelection = val
70 |     }
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/fixed-column-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data">
 4 |   </lb-table>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       tableData: {
12 |         column: [
13 |           {
14 |             prop: 'date',
15 |             label: '日期',
16 |             width: '150',
17 |             fixed: true
18 |           },
19 |           {
20 |             prop: 'name',
21 |             label: '姓名',
22 |             width: '120'
23 |           },
24 |           {
25 |             prop: 'province',
26 |             label: '省份',
27 |             width: '120'
28 |           },
29 |           {
30 |             prop: 'city',
31 |             label: '市区',
32 |             width: '120'
33 |           },
34 |           {
35 |             prop: 'address',
36 |             label: '地址',
37 |             width: '300'
38 |           },
39 |           {
40 |             prop: 'zip',
41 |             label: '邮编',
42 |             width: '120',
43 |             fixed: 'right'
44 |           }
45 |         ],
46 |         data: [
47 |           {
48 |             date: '2016-05-02',
49 |             name: '王小虎',
50 |             province: '上海',
51 |             city: '普陀区',
52 |             address: '上海市普陀区金沙江路 1518 弄',
53 |             zip: 200333
54 |           },
55 |           {
56 |             date: '2016-05-04',
57 |             name: '王小虎',
58 |             province: '上海',
59 |             city: '普陀区',
60 |             address: '上海市普陀区金沙江路 1517 弄',
61 |             zip: 200333
62 |           },
63 |           {
64 |             date: '2016-05-01',
65 |             name: '王小虎',
66 |             province: '上海',
67 |             city: '普陀区',
68 |             address: '上海市普陀区金沙江路 1519 弄',
69 |             zip: 200333
70 |           }
71 |         ]
72 |       }
73 |     }
74 |   }
75 | }
76 | </script>
77 | 
78 | <style>
79 | .el-table .warning-row {
80 |   background: oldlace;
81 | }
82 | 
83 | .el-table .success-row {
84 |   background: #f0f9eb;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/multi-header-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data"
 4 |     height="450">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期',
17 |             fixed: true,
18 |             width: '120',
19 |             renderHeader: (h, scope) => {
20 |               return <span><i class="el-icon-time"></i>{ scope.column.label }</span>
21 |             }
22 |           },
23 |           {
24 |             label: '配送信息',
25 |             children: [
26 |               {
27 |                 prop: 'name',
28 |                 label: '姓名',
29 |                 width: '120',
30 |                 render: (h, scope) => {
31 |                   return <el-tag>{ scope.row[scope.column.property] }</el-tag>
32 |                 }
33 |               },
34 |               {
35 |                 label: '地址',
36 |                 children: [
37 |                   {
38 |                     prop: 'province',
39 |                     label: '省份',
40 |                     width: '120'
41 |                   },
42 |                   {
43 |                     prop: 'city',
44 |                     label: '市区',
45 |                     width: '120'
46 |                   },
47 |                   {
48 |                     prop: 'address',
49 |                     label: '地址',
50 |                     width: '300px',
51 |                     renderHeader: (h, scope) => {
52 |                       return <span><i class="el-icon-location-outline"></i>{ scope.column.label }</span>
53 |                     }
54 |                   }
55 |                 ]
56 |               }
57 |             ]
58 |           }
59 |         ],
60 |         data: []
61 |       }
62 |     }
63 |   },
64 |   created () {
65 |     for (let i = 0; i < 20; i++) {
66 |       this.tableData.data.push({
67 |         date: `2016-05-${i + 1}`,
68 |         name: `王小虎${i + 1}`,
69 |         province: '上海',
70 |         city: '普陀区',
71 |         address: `上海市普陀区金沙江路 ${i + 1} 弄`,
72 |         zip: 200333
73 |       })
74 |     }
75 |   }
76 | }
77 | </script>
78 | 


--------------------------------------------------------------------------------
/src/components/lb-table/forced.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   selection: {
 3 |     renderHeader: (h, { store }) => {
 4 |       console.log(store)
 5 |       return (
 6 |         <el-checkbox
 7 |           disabled={store.states.data && store.states.data.length === 0}
 8 |           indeterminate={
 9 |             store.states.selection.length > 0 && !store.states.isAllSelected
10 |           }
11 |           nativeOn-click={store.toggleAllSelection}
12 |           value={store.states.isAllSelected}
13 |         />
14 |       )
15 |     },
16 |     renderCell: (h, { row, column, store, $index }) => {
17 |       return (
18 |         <el-checkbox
19 |           nativeOn-click={event => event.stopPropagation()}
20 |           value={store.isSelected(row)}
21 |           disabled={
22 |             column.selectable
23 |               ? !column.selectable.call(null, row, $index)
24 |               : false
25 |           }
26 |           on-input={() => {
27 |             store.commit('rowSelectedChanged', row)
28 |           }}
29 |         />
30 |       )
31 |     },
32 |     sortable: false,
33 |     resizable: false
34 |   },
35 |   index: {
36 |     renderHeader: (h, scope) => {
37 |       return <span>{scope.column.label || '#'}</span>
38 |     },
39 |     renderCell: (h, { $index, column }) => {
40 |       let i = $index + 1
41 |       const index = column.index
42 | 
43 |       if (typeof index === 'number') {
44 |         i = $index + index
45 |       } else if (typeof index === 'function') {
46 |         i = index($index)
47 |       }
48 | 
49 |       return <div>{i}</div>
50 |     },
51 |     sortable: false
52 |   },
53 |   expand: {
54 |     renderHeader: (h, scope) => {
55 |       return <span>{scope.column.label || ''}</span>
56 |     },
57 |     renderCell: (h, { row, store }, proxy) => {
58 |       const expanded = store.states.expandRows.indexOf(row) > -1
59 |       return (
60 |         <div
61 |           class={
62 |             'el-table__expand-icon ' +
63 |             (expanded ? 'el-table__expand-icon--expanded' : '')
64 |           }
65 |           on-click={e => proxy.handleExpandClick(row, e)}
66 |         >
67 |           <i class='el-icon el-icon-arrow-right' />
68 |         </div>
69 |       )
70 |     },
71 |     sortable: false,
72 |     resizable: false,
73 |     className: 'el-table__expand-column'
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/render-header-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table :column="tableData.column"
 3 |     :data="tableData.data">
 4 |   </lb-table>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data () {
10 |     return {
11 |       tableData: {
12 |         column: [
13 |           {
14 |             prop: 'date',
15 |             label: '日期',
16 |             renderHeader: (h, scope) => {
17 |               return <span><i class="el-icon-time">{ scope.column.label }</i></span>
18 |             }
19 |           },
20 |           {
21 |             prop: 'name',
22 |             label: '姓名'
23 |           },
24 |           {
25 |             label: '操作',
26 |             renderHeader: (h, scope) => {
27 |               return <el-input
28 |                       value={ this.search }
29 |                       size="mini"
30 |                       placeholder="输入关键字搜索"
31 |                       onInput={ (val) => { this.search = val } }/>
32 |             },
33 |             render: (h, scope) => {
34 |               return (
35 |                 <div>
36 |                   <el-button
37 |                     size="mini"
38 |                     onClick={ () => { this.handleEdit(scope.$index, scope.row) } }>编辑</el-button>
39 |                   <el-button
40 |                     size="mini"
41 |                     type="danger"
42 |                     onClick={ () => { this.handleDelete(scope.$index, scope.row) } }>删除</el-button>
43 |                 </div>
44 |               )
45 |             }
46 |           }
47 |         ],
48 |         data: [
49 |           {
50 |             date: '2016-05-02',
51 |             name: '王小虎1',
52 |             address: '上海市普陀区金沙江路 1518 弄'
53 |           },
54 |           {
55 |             date: '2016-05-02',
56 |             name: '王小虎2',
57 |             address: '上海市普陀区金沙江路 1518 弄'
58 |           },
59 |           {
60 |             date: '2016-05-02',
61 |             name: '王小虎3',
62 |             address: '上海市普陀区金沙江路 1518 弄'
63 |           }
64 |         ]
65 |       },
66 |       search: ''
67 |     }
68 |   },
69 |   methods: {
70 |     handleEdit (index, row) {
71 |       console.log(index, row)
72 |       this.$message(`点击的了编辑，索引：${ index }`)
73 |     },
74 |     handleDelete (index, row) {
75 |       console.log(index, row)
76 |       this.$message(`点击的了删除，索引：${ index }`)
77 |     }
78 |   }
79 | }
80 | </script>
81 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/align-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data"
  5 |       border
  6 |       align="center">
  7 |     </lb-table>
  8 | 
  9 |     <lb-table :column="tableData.column2"
 10 |       :data="tableData.data"
 11 |       border
 12 |       align="center"
 13 |       style="margin-top: 20px">
 14 |     </lb-table>
 15 | 
 16 |     <lb-table :column="tableData.column3"
 17 |       :data="tableData.data"
 18 |       border
 19 |       align="center"
 20 |       header-align="right"
 21 |       style="margin-top: 20px">
 22 |     </lb-table>
 23 |   </div>
 24 | </template>
 25 | 
 26 | <script>
 27 | export default {
 28 |   data () {
 29 |     return {
 30 |       tableData: {
 31 |         column: [
 32 |           {
 33 |             prop: 'date',
 34 |             label: '日期',
 35 |             width: '120'
 36 |           },
 37 |           {
 38 |             prop: 'name',
 39 |             label: '姓名',
 40 |             width: '120'
 41 |           },
 42 |           {
 43 |             prop: 'address',
 44 |             label: '地址'
 45 |           }
 46 |         ],
 47 |         column2: [
 48 |           {
 49 |             prop: 'date',
 50 |             label: '日期',
 51 |             width: '120',
 52 |             align: 'right'
 53 |           },
 54 |           {
 55 |             prop: 'name',
 56 |             label: '姓名',
 57 |             width: '120',
 58 |             align: 'left'
 59 |           },
 60 |           {
 61 |             prop: 'address',
 62 |             label: '地址'
 63 |           }
 64 |         ],
 65 |         column3: [
 66 |           {
 67 |             prop: 'date',
 68 |             label: '日期',
 69 |             width: '120',
 70 |             align: 'left'
 71 |           },
 72 |           {
 73 |             prop: 'name',
 74 |             label: '姓名',
 75 |             width: '120',
 76 |             align: 'left'
 77 |           },
 78 |           {
 79 |             prop: 'address',
 80 |             label: '地址',
 81 |             headerAlign: 'left'
 82 |           }
 83 |         ],
 84 |         data: [
 85 |           {
 86 |             date: '2016-05-02',
 87 |             name: '王小虎1',
 88 |             address: '上海市普陀区金沙江路 1518 弄'
 89 |           },
 90 |           {
 91 |             date: '2016-05-02',
 92 |             name: '王小虎2',
 93 |             address: '上海市普陀区金沙江路 1518 弄'
 94 |           },
 95 |           {
 96 |             date: '2016-05-02',
 97 |             name: '王小虎3',
 98 |             address: '上海市普陀区金沙江路 1518 弄'
 99 |           }
100 |         ]
101 |       }
102 |     }
103 |   }
104 | }
105 | </script>
106 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/render-table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <lb-table border
 3 |     :column="tableData.column"
 4 |     :data="tableData.data">
 5 |   </lb-table>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   data () {
11 |     return {
12 |       tableData: {
13 |         column: [
14 |           {
15 |             prop: 'date',
16 |             label: '日期',
17 |             render: (h, scope) => {
18 |               return (
19 |                 <div>
20 |                   <i class="el-icon-time"></i>
21 |                   <span style="margin-left: 10px">{ scope.row.date }</span>
22 |                 </div>
23 |               )
24 |             }
25 |           },
26 |           {
27 |             prop: 'name',
28 |             label: '姓名',
29 |             render: (h, scope) => {
30 |               return (
31 |                 <el-popover trigger="hover"
32 |                   placement="top">
33 |                   <p>姓名: { scope.row.name }</p>
34 |                   <p>住址: { scope.row.address }</p>
35 |                   <div slot="reference" style="display: inline-block">
36 |                     <el-tag size="medium">{ scope.row.name }</el-tag>
37 |                   </div>
38 |                 </el-popover>
39 |               )
40 |             }
41 |           },
42 |           {
43 |             label: '操作',
44 |             render: (h, scope) => {
45 |               return (
46 |                 <div>
47 |                   <el-button
48 |                     size="mini"
49 |                     onClick={ () => { this.handleEdit(scope.$index, scope.row) } }>编辑</el-button>
50 |                   <el-button
51 |                     size="mini"
52 |                     type="danger"
53 |                     onClick={ () => { this.handleDelete(scope.$index, scope.row) } }>删除</el-button>
54 |                 </div>
55 |               )
56 |             }
57 |           }
58 |         ],
59 |         data: [
60 |           {
61 |             date: '2016-05-02',
62 |             name: '王小虎1',
63 |             address: '上海市普陀区金沙江路 1518 弄'
64 |           },
65 |           {
66 |             date: '2016-05-02',
67 |             name: '王小虎2',
68 |             address: '上海市普陀区金沙江路 1519 弄'
69 |           },
70 |           {
71 |             date: '2016-05-02',
72 |             name: '王小虎3',
73 |             address: '上海市普陀区金沙江路 1520 弄'
74 |           }
75 |         ]
76 |       }
77 |     }
78 |   },
79 |   methods: {
80 |     handleEdit (index, row) {
81 |         console.log(index, row)
82 |         this.$message(`点击的了编辑，索引：${ index }`)
83 |       },
84 |     handleDelete (index, row) {
85 |       console.log(index, row)
86 |       this.$message(`点击的了删除，索引：${ index }`)
87 |     }
88 |   }
89 | }
90 | </script>
91 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/merge-row-column-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data"
  5 |       :span-method="arraySpanMethod"
  6 |       border>
  7 |     </lb-table>
  8 | 
  9 |     <lb-table :column="tableData.column"
 10 |       :data="tableData.data"
 11 |       :span-method="objectSpanMethod"
 12 |       style="margin-top: 20px"
 13 |       border>
 14 |     </lb-table>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   data () {
 21 |     return {
 22 |       tableData: {
 23 |         column: [
 24 |           {
 25 |             prop: 'id',
 26 |             label: 'ID'
 27 |           },
 28 |           {
 29 |             prop: 'name',
 30 |             label: '姓名'
 31 |           },
 32 |           {
 33 |             prop: 'amount1',
 34 |             label: '数值1',
 35 |             sortable: true
 36 |           },
 37 |           {
 38 |             prop: 'amount2',
 39 |             label: '数值2',
 40 |             sortable: true
 41 |           },
 42 |           {
 43 |             prop: 'amount3',
 44 |             label: '数值3',
 45 |             sortable: true
 46 |           }
 47 |         ],
 48 |         data: [
 49 |           {
 50 |             id: '12987122',
 51 |             name: '王小虎',
 52 |             amount1: '234',
 53 |             amount2: '3',
 54 |             amount3: 10
 55 |           },
 56 |           {
 57 |             id: '12987123',
 58 |             name: '王小虎',
 59 |             amount1: '165',
 60 |             amount2: '4',
 61 |             amount3: 12
 62 |           },
 63 |           {
 64 |             id: '12987124',
 65 |             name: '王小虎',
 66 |             amount1: '324',
 67 |             amount2: '1',
 68 |             amount3: 9
 69 |           },
 70 |           {
 71 |             id: '12987125',
 72 |             name: '王小虎',
 73 |             amount1: '621',
 74 |             amount2: '2',
 75 |             amount3: 17
 76 |           },
 77 |           {
 78 |             id: '12987126',
 79 |             name: '王小虎',
 80 |             amount1: '539',
 81 |             amount2: '4',
 82 |             amount3: 15
 83 |           }
 84 |         ]
 85 |       }
 86 |     }
 87 |   },
 88 |   methods: {
 89 |     arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
 90 |       if (rowIndex % 2 === 0) {
 91 |         if (columnIndex === 0) {
 92 |           return [1, 2]
 93 |         } else if (columnIndex === 1) {
 94 |           return [0, 0]
 95 |         }
 96 |       }
 97 |     },
 98 |     objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
 99 |       if (columnIndex === 0) {
100 |         if (rowIndex % 2 === 0) {
101 |           return {
102 |             rowspan: 2,
103 |             colspan: 1
104 |           };
105 |         } else {
106 |           return {
107 |             rowspan: 0,
108 |             colspan: 0
109 |           }
110 |         }
111 |       }
112 |     }
113 |   }
114 | }
115 | </script>
116 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/filter-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  4 |     <el-button @click="clearFilter">清除所有过滤器</el-button>
  5 |     <lb-table ref="filterTable"
  6 |       :column="tableData.column"
  7 |       :data="tableData.data">
  8 |     </lb-table>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   data() {
 15 |     return {
 16 |       tableData: {
 17 |         column: [
 18 |           {
 19 |             prop: 'date',
 20 |             label: '日期',
 21 |             sortable: true,
 22 |             columnKey: 'date',
 23 |             filters: [
 24 |               {text: '2016-05-01', value: '2016-05-01'},
 25 |               {text: '2016-05-02', value: '2016-05-02'},
 26 |               {text: '2016-05-03', value: '2016-05-03'},
 27 |               {text: '2016-05-04', value: '2016-05-04'}
 28 |             ],
 29 |             filterMethod: this.filterHandler
 30 |           },
 31 |           {
 32 |             prop: 'name',
 33 |             label: '姓名'
 34 |           },
 35 |           {
 36 |             prop: 'address',
 37 |             label: '地址'
 38 |           },
 39 |           {
 40 |             prop: 'tag',
 41 |             label: '标签',
 42 |             filters: [
 43 |               { text: '家', value: '家' },
 44 |               { text: '公司', value: '公司' }
 45 |             ],
 46 |             filterMethod: this.filterTag,
 47 |             filterPlacement: 'bottom-end',
 48 |             render: (h, scope) => {
 49 |               return (
 50 |                 <el-tag type={ scope.row.tag === '家' ? 'primary' : 'success' }>
 51 |                   { scope.row.tag }
 52 |                 </el-tag>
 53 |               )
 54 |             }
 55 |           }
 56 |         ],
 57 |         data: [
 58 |           {
 59 |             date: '2016-05-02',
 60 |             name: '王小虎',
 61 |             address: '上海市普陀区金沙江路 1518 弄',
 62 |             tag: '家'
 63 |           },
 64 |           {
 65 |             date: '2016-05-04',
 66 |             name: '王小虎',
 67 |             address: '上海市普陀区金沙江路 1517 弄',
 68 |             tag: '公司'
 69 |           },
 70 |           {
 71 |             date: '2016-05-01',
 72 |             name: '王小虎',
 73 |             address: '上海市普陀区金沙江路 1519 弄',
 74 |             tag: '家'
 75 |           },
 76 |           {
 77 |             date: '2016-05-03',
 78 |             name: '王小虎',
 79 |             address: '上海市普陀区金沙江路 1516 弄',
 80 |             tag: '公司'
 81 |           }
 82 |         ]
 83 |       }
 84 |     }
 85 |   },
 86 |   methods: {
 87 |     resetDateFilter () {
 88 |       this.$refs.filterTable.clearFilter('date')
 89 |     },
 90 |     clearFilter () {
 91 |       this.$refs.filterTable.clearFilter()
 92 |     },
 93 |     formatter (row, column) {
 94 |       return row.address
 95 |     },
 96 |     filterTag (value, row) {
 97 |       return row.tag === value
 98 |     },
 99 |     filterHandler (value, row, column) {
100 |       const property = column['property']
101 |       return row[property] === value;
102 |     }
103 |   }
104 | }
105 | </script>
106 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data"
  5 |       :row-class-name="rowClassName"
  6 |       height="300"
  7 |       border>
  8 |     </lb-table>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | import LbTable from './lb-table/lb-table'
 14 | export default {
 15 |   name: 'HelloWorld',
 16 |   components: {
 17 |     LbTable
 18 |   },
 19 |   data () {
 20 |     return {
 21 |       tableData: {
 22 |         column: [
 23 |           {
 24 |             prop: 'date',
 25 |             label: '日期'
 26 |           },
 27 |           {
 28 |             label: '配送信息',
 29 |             children: [
 30 |               {
 31 |                 prop: 'name',
 32 |                 label: '姓名'
 33 |               },
 34 |               {
 35 |                 label: '地址',
 36 |                 children: [
 37 |                   {
 38 |                     prop: 'province',
 39 |                     label: '省份'
 40 |                   },
 41 |                   {
 42 |                     prop: 'city',
 43 |                     label: '市区'
 44 |                   },
 45 |                   {
 46 |                     prop: 'address',
 47 |                     label: '地址'
 48 |                   }
 49 |                 ]
 50 |               }
 51 |             ]
 52 |           }
 53 |         ],
 54 |         data: [
 55 |           {
 56 |             date: '2016-05-03',
 57 |             name: '王小虎1',
 58 |             province: '上海',
 59 |             city: '普陀区',
 60 |             address: '上海市普陀区金沙江路 1518 弄',
 61 |             zip: 200333
 62 |           },
 63 |           {
 64 |             date: '2016-05-02',
 65 |             name: '王小虎2',
 66 |             province: '上海',
 67 |             city: '普陀区',
 68 |             address: '上海市普陀区金沙江路 1518 弄',
 69 |             zip: 200333
 70 |           },
 71 |           {
 72 |             date: '2016-05-02',
 73 |             name: '王小虎3',
 74 |             province: '上海',
 75 |             city: '普陀区',
 76 |             address: '上海市普陀区金沙江路 1518 弄',
 77 |             zip: 200333
 78 |           },
 79 |           {
 80 |             date: '2016-05-02',
 81 |             name: '王小虎4',
 82 |             province: '上海',
 83 |             city: '普陀区',
 84 |             address: '上海市普陀区金沙江路 1518 弄',
 85 |             zip: 200333
 86 |           },
 87 |           {
 88 |             date: '2016-05-02',
 89 |             name: '王小虎5',
 90 |             province: '上海',
 91 |             city: '普陀区',
 92 |             address: '上海市普陀区金沙江路 1518 弄',
 93 |             zip: 200333
 94 |           }
 95 |         ]
 96 |       }
 97 |     }
 98 |   },
 99 |   methods: {
100 |     rowClassName ({ row, rowIndex }) {
101 |       if (rowIndex === 1) {
102 |         return 'warning-row'
103 |       } else if (rowIndex === 3) {
104 |         return 'success-row'
105 |       }
106 |       return ''
107 |     }
108 |   }
109 | }
110 | </script>
111 | 
112 | <style>
113 | .el-table .warning-row {
114 |   background: oldlace;
115 | }
116 | 
117 | .el-table .success-row {
118 |   background: #f0f9eb;
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/edit-dialog-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data">
  5 |     </lb-table>
  6 | 
  7 |     <el-dialog :visible.sync="dialogVisible"
  8 |       title="编辑"
  9 |       append-to-body>
 10 |       <div class="dialog-content">
 11 |         <el-form v-if="currentEdit"
 12 |           label-width="100px">
 13 | 
 14 |           <el-form-item label="日期">
 15 |             <el-date-picker v-model="currentEdit.date"
 16 |               type="date"
 17 |               value-format="yyyy-MM-dd"
 18 |               placeholder="选择日期">
 19 |             </el-date-picker>
 20 |           </el-form-item>
 21 | 
 22 |           <el-form-item label="姓名">
 23 |             <el-input v-model="currentEdit.name"
 24 |               placeholder="请输入姓名">
 25 |             </el-input>
 26 |           </el-form-item>
 27 | 
 28 |           <el-form-item label="地址">
 29 |             <el-input v-model="currentEdit.address"
 30 |               type="textarea"
 31 |               placeholder="请输入地址">
 32 |             </el-input>
 33 |           </el-form-item>
 34 |         </el-form>
 35 |       </div>
 36 |       <div slot="footer"
 37 |         class="dialog-footer">
 38 |         <el-button @click="dialogVisible = false">取 消</el-button>
 39 |         <el-button type="primary"
 40 |           @click="confirm">确 定</el-button>
 41 |       </div>
 42 |     </el-dialog>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <script>
 47 | export default {
 48 |   data () {
 49 |     return {
 50 |       tableData: {
 51 |         column: [
 52 |           {
 53 |             prop: 'date',
 54 |             label: '日期'
 55 |           },
 56 |           {
 57 |             prop: 'name',
 58 |             label: '姓名'
 59 |           },
 60 |           {
 61 |             prop: 'address',
 62 |             label: '地址'
 63 |           },
 64 |           {
 65 |             label: '操作',
 66 |             render: (h, scope) => {
 67 |               return <el-button type="primary" onClick={ () => { this.openDialog(scope) } }>编辑</el-button>
 68 |             }
 69 |           }
 70 |         ],
 71 |         data: [
 72 |           {
 73 |             date: '2016-05-02',
 74 |             name: '王小虎1',
 75 |             address: '上海市普陀区金沙江路 1518 弄'
 76 |           },
 77 |           {
 78 |             date: '2016-05-02',
 79 |             name: '王小虎2',
 80 |             address: '上海市普陀区金沙江路 1518 弄'
 81 |           },
 82 |           {
 83 |             date: '2016-05-02',
 84 |             name: '王小虎3',
 85 |             address: '上海市普陀区金沙江路 1518 弄'
 86 |           }
 87 |         ]
 88 |       },
 89 |       currentEdit: null,
 90 |       currentIndex: null,
 91 |       dialogVisible: false
 92 |     }
 93 |   },
 94 |   methods: {
 95 |     openDialog (scope) {
 96 |       this.currentEdit = JSON.parse(JSON.stringify(scope.row))
 97 |       this.currentIndex = scope.$index
 98 |       this.dialogVisible = true
 99 |     },
100 |     confirm () {
101 |       this.dialogVisible = false
102 |       this.$set(this.tableData.data, this.currentIndex, this.currentEdit)
103 |     }
104 |   }
105 | }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/footer-total-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data"
  5 |       border
  6 |       show-summary>
  7 |     </lb-table>
  8 | 
  9 |     <lb-table :column="tableData.column"
 10 |       :data="tableData.data"
 11 |       :summary-method="getSummaries"
 12 |       style="margin-top: 20px"
 13 |       height="250"
 14 |       border
 15 |       show-summary>
 16 |     </lb-table>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   data () {
 23 |     return {
 24 |       tableData: {
 25 |         column: [
 26 |           {
 27 |             prop: 'id',
 28 |             label: 'ID'
 29 |           },
 30 |           {
 31 |             prop: 'name',
 32 |             label: '姓名'
 33 |           },
 34 |           {
 35 |             prop: 'amount1',
 36 |             label: '数值1',
 37 |             sortable: true
 38 |           },
 39 |           {
 40 |             prop: 'amount2',
 41 |             label: '数值2',
 42 |             sortable: true
 43 |           },
 44 |           {
 45 |             prop: 'amount3',
 46 |             label: '数值3',
 47 |             sortable: true
 48 |           }
 49 |         ],
 50 |         data: [
 51 |           {
 52 |             id: '12987122',
 53 |             name: '王小虎',
 54 |             amount1: '234',
 55 |             amount2: '3',
 56 |             amount3: 10
 57 |           },
 58 |           {
 59 |             id: '12987123',
 60 |             name: '王小虎',
 61 |             amount1: '165',
 62 |             amount2: '4',
 63 |             amount3: 12
 64 |           },
 65 |           {
 66 |             id: '12987124',
 67 |             name: '王小虎',
 68 |             amount1: '324',
 69 |             amount2: '1',
 70 |             amount3: 9
 71 |           },
 72 |           {
 73 |             id: '12987125',
 74 |             name: '王小虎',
 75 |             amount1: '621',
 76 |             amount2: '2',
 77 |             amount3: 17
 78 |           },
 79 |           {
 80 |             id: '12987126',
 81 |             name: '王小虎',
 82 |             amount1: '539',
 83 |             amount2: '4',
 84 |             amount3: 15
 85 |           }
 86 |         ]
 87 |       }
 88 |     }
 89 |   },
 90 |   methods: {
 91 |     getSummaries (param) {
 92 |       const { columns, data } = param
 93 |       const sums = []
 94 |       columns.forEach((column, index) => {
 95 |         if (index === 0) {
 96 |           sums[index] = '总价'
 97 |           return
 98 |         }
 99 |         const values = data.map(item => Number(item[column.property]))
100 |         if (!values.every(value => isNaN(value))) {
101 |           sums[index] = values.reduce((prev, curr) => {
102 |             const value = Number(curr)
103 |             if (!isNaN(value)) {
104 |               return prev + curr
105 |             } else {
106 |               return prev
107 |             }
108 |           }, 0);
109 |           sums[index] += ' 元'
110 |         } else {
111 |           sums[index] = 'N/A'
112 |         }
113 |       })
114 | 
115 |       return sums
116 |     }
117 |   }
118 | }
119 | </script>
120 | 


--------------------------------------------------------------------------------
/src/components/lb-table/lb-column.vue:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * FileName: lb-column.vue
  3 |  * Remark: element-column
  4 |  * Project: lb-element-table
  5 |  * Author: LiuBing
  6 |  * File Created: Tuesday, 19th March 2019 9:58:23 am
  7 |  * Last Modified: Tuesday, 19th March 2019 10:14:42 am
  8 |  * Modified By: LiuBing
  9 |  */
 10 | 
 11 | <template>
 12 |   <el-table-column v-bind="$attrs"
 13 |     v-on="$listeners"
 14 |     :prop="column.prop"
 15 |     :label="column.label"
 16 |     :type="column.type"
 17 |     :index="column.index"
 18 |     :column-key="column.columnKey"
 19 |     :width="column.width"
 20 |     :min-width="column.minWidth"
 21 |     :fixed="column.fixed"
 22 |     :render-header="column.renderHeader"
 23 |     :sortable="column.sortable || false"
 24 |     :sort-method="column.sortMethod"
 25 |     :sort-by="column.sortBy"
 26 |     :sort-orders="column.sortOrders"
 27 |     :resizable="column.resizable || true"
 28 |     :formatter="column.formatter"
 29 |     :show-overflow-tooltip="column.showOverflowTooltip || false"
 30 |     :align="column.align || align || 'left'"
 31 |     :header-align="column.headerAlign || headerAlign || column.align || align || 'left'"
 32 |     :class-name="column.className"
 33 |     :label-class-name="column.labelClassName"
 34 |     :selectable="column.selectable"
 35 |     :reserve-selection="column.reserveSelection || false"
 36 |     :filters="column.filters"
 37 |     :filter-placement="column.filterPlacement"
 38 |     :filter-multiple="column.filterMultiple"
 39 |     :filter-method="column.filterMethod"
 40 |     :filtered-value="column.filteredValue">
 41 | 
 42 |     <template slot="header"
 43 |       slot-scope="scope">
 44 |       <lb-render v-if="column.renderHeader"
 45 |         :scope="scope"
 46 |         :render="column.renderHeader">
 47 |       </lb-render>
 48 |       <span v-else>{{ scope.column.label }}</span>
 49 |     </template>
 50 | 
 51 |     <template slot-scope="scope">
 52 |       <lb-render :scope="scope"
 53 |         :render="column.render">
 54 |       </lb-render>
 55 |     </template>
 56 | 
 57 |     <template v-if="column.children">
 58 |       <lb-column v-for="(col, index) in column.children"
 59 |         :key="index"
 60 |         :column="col">
 61 |       </lb-column>
 62 |     </template>
 63 |   </el-table-column>
 64 | </template>
 65 | 
 66 | <script>
 67 | import LbRender from './lb-render'
 68 | import forced from './forced.js'
 69 | export default {
 70 |   name: 'LbColumn',
 71 |   props: {
 72 |     column: Object,
 73 |     headerAlign: String,
 74 |     align: String
 75 |   },
 76 |   components: {
 77 |     LbRender
 78 |   },
 79 |   methods: {
 80 |     setColumn () {
 81 |       if (this.column.type) {
 82 |         this.column.renderHeader = forced[this.column.type].renderHeader
 83 |         this.column.render = this.column.render || forced[this.column.type].renderCell
 84 |       }
 85 |       if (this.column.formatter) {
 86 |         this.column.render = (h, scope) => {
 87 |           return <span>{ scope.column.formatter(scope.row, scope.column, scope.row, scope.$index) }</span>
 88 |         }
 89 |       }
 90 |       if (!this.column.render) {
 91 |         this.column.render = (h, scope) => {
 92 |           return <span>{ scope.row[scope.column.property] }</span>
 93 |         }
 94 |       }
 95 |     }
 96 |   },
 97 |   watch: {
 98 |     column: {
 99 |       handler () {
100 |         this.setColumn()
101 |       },
102 |       immediate: true
103 |     }
104 |   }
105 | }
106 | </script>
107 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/expand-row-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <lb-table :column="tableData.column"
  3 |     :data="tableData.data">
  4 |   </lb-table>
  5 | </template>
  6 | 
  7 | <script>
  8 | export default {
  9 |   data () {
 10 |     return {
 11 |       tableData: {
 12 |         column: [
 13 |           {
 14 |             type: 'expand',
 15 |             render: (h, props) => {
 16 |               return  (
 17 |                 <el-form label-position="left" 
 18 |                   inline 
 19 |                   class="demo-table-expand">
 20 |                   <el-form-item label="商品名称">
 21 |                     <span>{ props.row.name }</span>
 22 |                   </el-form-item>
 23 |                   <el-form-item label="所属店铺">
 24 |                     <span>{ props.row.shop }</span>
 25 |                   </el-form-item>
 26 |                   <el-form-item label="商品 ID">
 27 |                     <span>{ props.row.id }</span>
 28 |                   </el-form-item>
 29 |                   <el-form-item label="店铺 ID">
 30 |                     <span>{ props.row.shopId }</span>
 31 |                   </el-form-item>
 32 |                   <el-form-item label="商品分类">
 33 |                     <span>{ props.row.category }</span>
 34 |                   </el-form-item>
 35 |                   <el-form-item label="店铺地址">
 36 |                     <span>{ props.row.address }</span>
 37 |                   </el-form-item>
 38 |                   <el-form-item label="商品描述">
 39 |                     <span>{ props.row.desc }</span>
 40 |                   </el-form-item>
 41 |                 </el-form>
 42 |               )
 43 |             }
 44 |           },
 45 |           {
 46 |             prop: 'id',
 47 |             label: 'ID'
 48 |           },
 49 |           {
 50 |             prop: 'name',
 51 |             label: '商品名称'
 52 |           },
 53 |           {
 54 |             prop: 'desc',
 55 |             label: '描述'
 56 |           }
 57 |         ],
 58 |         data: [
 59 |           {
 60 |             id: '12987122',
 61 |             name: '好滋好味鸡蛋仔',
 62 |             category: '江浙小吃、小吃零食',
 63 |             desc: '荷兰优质淡奶，奶香浓而不腻',
 64 |             address: '上海市普陀区真北路',
 65 |             shop: '王小虎夫妻店',
 66 |             shopId: '10333'
 67 |           },
 68 |           {
 69 |             id: '12987123',
 70 |             name: '好滋好味鸡蛋仔',
 71 |             category: '江浙小吃、小吃零食',
 72 |             desc: '荷兰优质淡奶，奶香浓而不腻',
 73 |             address: '上海市普陀区真北路',
 74 |             shop: '王小虎夫妻店',
 75 |             shopId: '10333'
 76 |           },
 77 |           {
 78 |             id: '12987125',
 79 |             name: '好滋好味鸡蛋仔',
 80 |             category: '江浙小吃、小吃零食',
 81 |             desc: '荷兰优质淡奶，奶香浓而不腻',
 82 |             address: '上海市普陀区真北路',
 83 |             shop: '王小虎夫妻店',
 84 |             shopId: '10333'
 85 |           },
 86 |           {
 87 |             id: '12987126',
 88 |             name: '好滋好味鸡蛋仔',
 89 |             category: '江浙小吃、小吃零食',
 90 |             desc: '荷兰优质淡奶，奶香浓而不腻',
 91 |             address: '上海市普陀区真北路',
 92 |             shop: '王小虎夫妻店',
 93 |             shopId: '10333'
 94 |           }
 95 |         ]
 96 |       }
 97 |     }
 98 |   }
 99 | }
100 | </script>
101 | 
102 | <style>
103 |   .demo-table-expand {
104 |     font-size: 0;
105 |   }
106 |   .demo-table-expand label {
107 |     width: 90px;
108 |     color: #99a9bf;
109 |   }
110 |   .demo-table-expand .el-form-item {
111 |     margin-right: 0;
112 |     margin-bottom: 0;
113 |     width: 50%;
114 |   }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/tree-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData1.column"
  4 |       :data="tableData1.data"
  5 |       border
  6 |       row-key="id"
  7 |       border
  8 |       default-expand-all
  9 |       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 10 |     </lb-table>
 11 |     <br />
 12 |     <lb-table :column="tableData1.column"
 13 |       :data="tableData2.data"
 14 |       row-key="id"
 15 |       border
 16 |       lazy
 17 |       :load="load"
 18 |       :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 19 |     </lb-table>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | export default {
 25 |   data () {
 26 |     return {
 27 |       tableData1: {
 28 |         column: [
 29 |           {
 30 |             prop: 'date',
 31 |             label: '日期'
 32 |           },
 33 |           {
 34 |             prop: 'name',
 35 |             label: '姓名'
 36 |           },
 37 |           {
 38 |             prop: 'address',
 39 |             label: '地址'
 40 |           }
 41 |         ],
 42 |         data: [
 43 |           {
 44 |             id: 1,
 45 |             date: '2016-05-02',
 46 |             name: '王小虎',
 47 |             address: '上海市普陀区金沙江路 1518 弄'
 48 |           },
 49 |           {
 50 |             id: 2,
 51 |             date: '2016-05-04',
 52 |             name: '王小虎',
 53 |             address: '上海市普陀区金沙江路 1517 弄'
 54 |           },
 55 |           {
 56 |             id: 3,
 57 |             date: '2016-05-01',
 58 |             name: '王小虎',
 59 |             address: '上海市普陀区金沙江路 1519 弄',
 60 |             children: [
 61 |               {
 62 |                 id: 31,
 63 |                 date: '2016-05-01',
 64 |                 name: '王小虎',
 65 |                 address: '上海市普陀区金沙江路 1519 弄'
 66 |               },
 67 |               {
 68 |                 id: 32,
 69 |                 date: '2016-05-01',
 70 |                 name: '王小虎',
 71 |                 address: '上海市普陀区金沙江路 1519 弄'
 72 |               }
 73 |             ]
 74 |           },
 75 |           {
 76 |             id: 4,
 77 |             date: '2016-05-03',
 78 |             name: '王小虎',
 79 |             address: '上海市普陀区金沙江路 1516 弄'
 80 |           }
 81 |         ]
 82 |       },
 83 |       tableData2: {
 84 |         data: [
 85 |           {
 86 |             id: 1,
 87 |             date: '2016-05-02',
 88 |             name: '王小虎',
 89 |             address: '上海市普陀区金沙江路 1518 弄'
 90 |           },
 91 |           {
 92 |             id: 2,
 93 |             date: '2016-05-04',
 94 |             name: '王小虎',
 95 |             address: '上海市普陀区金沙江路 1517 弄'
 96 |           },
 97 |           {
 98 |             id: 3,
 99 |             date: '2016-05-01',
100 |             name: '王小虎',
101 |             address: '上海市普陀区金沙江路 1519 弄',
102 |             hasChildren: true
103 |           },
104 |           {
105 |             id: 4,
106 |             date: '2016-05-03',
107 |             name: '王小虎',
108 |             address: '上海市普陀区金沙江路 1516 弄'
109 |           }
110 |         ]
111 |       }
112 |     }
113 |   },
114 |   methods: {
115 |     load(tree, treeNode, resolve) {
116 |       setTimeout(() => {
117 |         resolve([
118 |           {
119 |             id: 31,
120 |             date: '2016-05-01',
121 |             name: '王小虎',
122 |             address: '上海市普陀区金沙江路 1519 弄'
123 |           }, {
124 |             id: 32,
125 |             date: '2016-05-01',
126 |             name: '王小虎',
127 |             address: '上海市普陀区金沙江路 1519 弄'
128 |           }
129 |         ])
130 |       }, 1000)
131 |     }
132 |   }
133 | }
134 | </script>
135 | 


--------------------------------------------------------------------------------
/src/components/lb-table/lb-table.vue:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * FileName: lb-table.vue
  3 |  * Remark: element table
  4 |  * Project: lb-element-table
  5 |  * Author: LiuBing
  6 |  * File Created: Tuesday, 19th March 2019 9:55:27 am
  7 |  * Last Modified: Tuesday, 19th March 2019 9:55:34 am
  8 |  * Modified By: LiuBing
  9 |  */
 10 | 
 11 | <template>
 12 |   <div class="lb-table">
 13 |     <el-table ref="elTable"
 14 |       v-bind="$attrs"
 15 |       v-on="$listeners"
 16 |       :data="data"
 17 |       :span-method="this.merge ? this.mergeMethod : this.spanMethod">
 18 |       <lb-column v-bind="$attrs"
 19 |         v-for="(item, index) in column"
 20 |         :key="index"
 21 |         :column="item">
 22 |       </lb-column>
 23 |     </el-table>
 24 |     <el-pagination class="lb-table-pagination"
 25 |       v-if="pagination"
 26 |       v-bind="$attrs"
 27 |       v-on="$listeners"
 28 |       @current-change="paginationCurrentChange"
 29 |       :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
 30 |     </el-pagination>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | import LbColumn from './lb-column'
 36 | export default {
 37 |   props: {
 38 |     column: Array,
 39 |     data: Array,
 40 |     spanMethod: Function,
 41 |     pagination: {
 42 |       type: Boolean,
 43 |       default: false
 44 |     },
 45 |     paginationTop: {
 46 |       type: String,
 47 |       default: '15px'
 48 |     },
 49 |     paginationAlign: {
 50 |       type: String,
 51 |       default: 'right'
 52 |     },
 53 |     merge: Array
 54 |   },
 55 |   components: {
 56 |     LbColumn
 57 |   },
 58 |   data () {
 59 |     return {
 60 |       mergeLine: {},
 61 |       mergeIndex: {}
 62 |     }
 63 |   },
 64 |   created () {
 65 |     this.getMergeArr(this.data, this.merge)
 66 |   },
 67 |   computed: {
 68 |     dataLength () {
 69 |       return this.data.length
 70 |     }
 71 |   },
 72 |   methods: {
 73 |     clearSelection () {
 74 |       this.$refs.elTable.clearSelection()
 75 |     },
 76 |     toggleRowSelection (row, selected) {
 77 |       this.$refs.elTable.toggleRowSelection(row, selected)
 78 |     },
 79 |     toggleAllSelection () {
 80 |       this.$refs.elTable.toggleAllSelection()
 81 |     },
 82 |     toggleRowExpansion (row, expanded) {
 83 |       this.$refs.elTable.toggleRowExpansion(row, expanded)
 84 |     },
 85 |     setCurrentRow (row) {
 86 |       this.$refs.elTable.setCurrentRow(row)
 87 |     },
 88 |     clearSort () {
 89 |       this.$refs.elTable.clearSort()
 90 |     },
 91 |     clearFilter (columnKey) {
 92 |       this.$refs.elTable.clearFilter(columnKey)
 93 |     },
 94 |     doLayout () {
 95 |       this.$refs.elTable.doLayout()
 96 |     },
 97 |     sort (prop, order) {
 98 |       this.$refs.elTable.sort(prop, order)
 99 |     },
100 |     paginationCurrentChange (val) {
101 |       this.$emit('p-current-change', val)
102 |     },
103 |     getMergeArr (tableData, merge) {
104 |       if (!merge) return
105 |       this.mergeLine = {}
106 |       this.mergeIndex = {}
107 |       merge.forEach((item, k) => {
108 |         tableData.forEach((data, i) => {
109 |           if (i === 0) {
110 |             this.mergeIndex[item] = this.mergeIndex[item] || []
111 |             this.mergeIndex[item].push(1)
112 |             this.mergeLine[item] = 0
113 |           } else {
114 |             if (data[item] === tableData[i - 1][item]) {
115 |               this.mergeIndex[item][this.mergeLine[item]] += 1
116 |               this.mergeIndex[item].push(0)
117 |             } else {
118 |               this.mergeIndex[item].push(1)
119 |               this.mergeLine[item] = i
120 |             }
121 |           }
122 |         })
123 |       })
124 |     },
125 |     mergeMethod ({ row, column, rowIndex, columnIndex }) {
126 |       const index = this.merge.indexOf(column.property)
127 |       if (index > -1) {
128 |         const _row = this.mergeIndex[this.merge[index]][rowIndex]
129 |         const _col = _row > 0 ? 1 : 0
130 |         return {
131 |           rowspan: _row,
132 |           colspan: _col
133 |         }
134 |       }
135 |     }
136 |   },
137 |   watch: {
138 |     merge () {
139 |       this.getMergeArr(this.data, this.merge)
140 |     },
141 |     dataLength () {
142 |       this.getMergeArr(this.data, this.merge)
143 |     }
144 |   }
145 | }
146 | 
147 | </script>
148 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/merge-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <lb-table :column="tableData.column"
  4 |       :data="tableData.data"
  5 |       :merge="['name', 'proportion', 'material', 'value3']"
  6 |       border>
  7 |     </lb-table>
  8 | 
  9 |     <lb-table :column="tableData2.column"
 10 |       :data="tableData2.data"
 11 |       :merge="['name', 'proportion']"
 12 |       border
 13 |       style="margin-top: 20px">
 14 |     </lb-table>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | export default {
 20 |   data () {
 21 |     return {
 22 |       tableData: {
 23 |         column: [
 24 |           {
 25 |             prop: 'name',
 26 |             label: '行业'
 27 |           },
 28 |           {
 29 |             prop: 'proportion',
 30 |             label: '市场规模占比'
 31 |           },
 32 |           {
 33 |             prop: 'material',
 34 |             label: '主原材料'
 35 |           },
 36 |           {
 37 |             prop: 'value1',
 38 |             label: '最新价格'
 39 |           },
 40 |           {
 41 |             prop: 'value2',
 42 |             label: '比年初'
 43 |           },
 44 |           {
 45 |             prop: 'value3',
 46 |             label: '比上年同期'
 47 |           }
 48 |         ],
 49 |         data: [
 50 |           {
 51 |             name: ' 氮肥、复合肥',
 52 |             proportion: '15.23%',
 53 |             material: '尿素',
 54 |             value1: '2.04',
 55 |             value2: '2.00%',
 56 |             value3: '	13.97%'
 57 |           },
 58 |           {
 59 |             name: ' 氮肥、复合肥',
 60 |             proportion: '15.23%',
 61 |             material: '三元复合肥',
 62 |             value1: '2.74',
 63 |             value2: '0.37%',
 64 |             value3: '	2.24%'
 65 |           },
 66 |           {
 67 |             name: ' 氮肥、复合肥',
 68 |             proportion: '15.23%',
 69 |             material: '三元复合肥',
 70 |             value1: '3.05',
 71 |             value2: '0.33%',
 72 |             value3: '	2.35%'
 73 |           },
 74 |           {
 75 |             name: ' 种子生产',
 76 |             proportion: '6.83%',
 77 |             material: '玉米种子',
 78 |             value1: '24.3',
 79 |             value2: '-16.06%',
 80 |             value3: '	-5.70%'
 81 |           },
 82 |           {
 83 |             name: ' 种子生产',
 84 |             proportion: '6.83%',
 85 |             material: '水稻种子',
 86 |             value1: '24.3',
 87 |             value2: '-16.06%',
 88 |             value3: '	-5.70%'
 89 |           }
 90 |         ]
 91 |       },
 92 |       tableData2: {
 93 |         column: [
 94 |           {
 95 |             prop: 'name',
 96 |             label: '主要行业',
 97 |             width: '150'
 98 |           },
 99 |           {
100 |             prop: 'proportion',
101 |             label: '市场规模占比',
102 |             width: '150'
103 |           },
104 |           {
105 |             prop: 'indexName',
106 |             label: '指标',
107 |             width: '300'
108 |           },
109 |           {
110 |             prop: 'value1',
111 |             label: '2018年'
112 |           },
113 |           {
114 |             prop: 'value2',
115 |             label: '2017年'
116 |           },
117 |           {
118 |             prop: 'value3',
119 |             label: '2016年'
120 |           }
121 |         ],
122 |         data: [
123 |           {
124 |             name: '房地产（商业住宅）',
125 |             proportion: '60%',
126 |             indexName: '住宅房地产开发投资累计同比增速',
127 |             value1: '13.6%',
128 |             value2: '9.4%',
129 |             value3: '6.4%'
130 |           },
131 |           {
132 |             name: '房地产（商业住宅）',
133 |             proportion: '60%',
134 |             indexName: '商品房销售面积累计累计同比增速',
135 |             value1: '2.9%',
136 |             value2: '7.7%',
137 |             value3: '22.5%'
138 |           },
139 |           {
140 |             name: '建筑业（商业住宅）',
141 |             proportion: '60%',
142 |             indexName: '住宅房屋建筑竣工面积累计同比增长率',
143 |             value1: '0.05%',
144 |             value2: '0.93%',
145 |             value3: '0.24%'
146 |           },
147 |           {
148 |             name: '房地产（公共建筑）',
149 |             proportion: '40%',
150 |             indexName: '办公楼房地产开发投资完成额累计同比增速',
151 |             value1: '-12%',
152 |             value2: '3.5%',
153 |             value3: '5.2%'
154 |           },
155 |           {
156 |             name: '房地产（公共建筑）',
157 |             proportion: '40%',
158 |             indexName: '商业营业用房房地产开发投资累计同比增速',
159 |             value1: '-9.4%',
160 |             value2: '-1.2%',
161 |             value3: '8.4%'
162 |           },
163 |           {
164 |             name: '建筑业（公共建筑）',
165 |             proportion: '40%',
166 |             indexName: '办公用房竣工面积累计值（万平方米）',
167 |             value1: '-8.06%',
168 |             value2: '0.82%',
169 |             value3: '6.46%'
170 |           }
171 |         ]
172 |       }
173 |     }
174 |   }
175 | }
176 | </script>
177 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/example/zh/edit-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <lb-table :column="tableData.column"
  3 |     :data="tableData.data">
  4 |   </lb-table>
  5 | </template>
  6 | 
  7 | <script>
  8 | export default {
  9 |   data () {
 10 |     return {
 11 |       tableData: {
 12 |         column: [
 13 |           {
 14 |             prop: 'date',
 15 |             label: '日期',
 16 |             width: '150',
 17 |             render: (h, scope) => {
 18 |               return (
 19 |                 <div>
 20 |                   {
 21 |                     scope.row._edit
 22 |                       ? <el-date-picker
 23 |                         value={ scope.row[scope.column.property] }
 24 |                         type="date"
 25 |                         value-format="yyyy-MM-dd"
 26 |                         placeholder="选择日期"
 27 |                         style="width: 140px"
 28 |                         onInput={ (val) => { scope.row[scope.column.property] = val } }>
 29 |                       </el-date-picker>
 30 |                       : <span>{ scope.row[scope.column.property] }</span>
 31 |                   }
 32 |                 </div>
 33 |               )
 34 |             }
 35 |           },
 36 |           {
 37 |             prop: 'name',
 38 |             label: '姓名',
 39 |             render: (h, scope) => {
 40 |               return (
 41 |                 <div>
 42 |                   {
 43 |                     scope.row._edit
 44 |                       ? <el-input value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } }></el-input>
 45 |                       : <span>{ scope.row[scope.column.property] }</span>
 46 |                   }
 47 |                 </div>
 48 |               )
 49 |             }
 50 |           },
 51 |           {
 52 |             prop: 'tag',
 53 |             label: '标签',
 54 |             render: (h, scope) => {
 55 |               return (
 56 |                 <div>
 57 |                   {
 58 |                     scope.row._edit
 59 |                       ? (
 60 |                         <el-select value={ scope.row[scope.column.property] }
 61 |                           style="width: 80px"
 62 |                           onChange={ (val) => { scope.row[scope.column.property] = val } }>
 63 |                           {
 64 |                             this.tagOptions.map(option => {
 65 |                               return (
 66 |                                 <el-option label={ option.label } value={ option.value }></el-option>
 67 |                               )
 68 |                             })
 69 |                           }
 70 |                         </el-select>
 71 |                       )
 72 |                       : <el-tag type={ scope.row.tag === '家' ? 'primary' : 'success'}>{ scope.row[scope.column.property] }</el-tag>
 73 |                   }
 74 |                 </div>
 75 |               )
 76 |             }
 77 |           },
 78 |           {
 79 |             label: '操作',
 80 |             render: (h, scope) => {
 81 |               return (
 82 |                 <div>
 83 |                   {
 84 |                     scope.row._edit
 85 |                       ? <div>
 86 |                         <el-button type="primary" onClick={ () => { this.handleSave(scope) } }>保存</el-button>
 87 |                         <el-button onClick={ () => { this.handleCancle(scope) } }>取消</el-button>
 88 |                       </div>
 89 |                       : <el-button type="primary"
 90 |                         onClick={ () => { this.handleEdit(scope) } }>编辑</el-button>
 91 |                   }
 92 |                 </div>
 93 |               )
 94 |             }
 95 |           }
 96 |         ],
 97 |         data: [
 98 |           {
 99 |             date: '2016-05-02',
100 |             name: '王小虎1',
101 |             tag: '家'
102 |           },
103 |           {
104 |             date: '2016-05-02',
105 |             name: '王小虎2',
106 |             tag: '公司'
107 |           },
108 |           {
109 |             date: '2016-05-02',
110 |             name: '王小虎3',
111 |             tag: '公司'
112 |           }
113 |         ],
114 |         defaultData: []
115 |       },
116 |       tagOptions: [
117 |         {
118 |           label: '家',
119 |           value: '家'
120 |         },
121 |         {
122 |           label: '公司',
123 |           value: '公司'
124 |         }
125 |       ]
126 |     }
127 |   },
128 |   created () {
129 |     this.tableData.defaultData = JSON.parse(JSON.stringify(this.tableData.data))
130 |   },
131 |   methods: {
132 |     handleEdit (scope) {
133 |       this.$set(scope.row, '_edit', true)
134 |     },
135 |     handleSave (scope) {
136 |       this.$set(scope.row, '_edit', false)
137 |       this.$set(this.tableData.defaultData, scope.$index, JSON.parse(JSON.stringify(scope.row)))
138 |     },
139 |     handleCancle (scope) {
140 |       this.$set(this.tableData.data, scope.$index, JSON.parse(JSON.stringify(this.tableData.defaultData[scope.$index])))
141 |     }
142 |   }
143 | }
144 | </script>
145 | 


--------------------------------------------------------------------------------
/docs/.vuepress/components/demo-block/demo-block.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="demo-block"
  3 |     :class="[blockClass, { 'hover': hovering }]"
  4 |     @mouseenter="hovering = true"
  5 |     @mouseleave="hovering = false">
  6 |     <div class="source">
  7 |       <slot name="source"></slot>
  8 |     </div>
  9 |     <div class="meta"
 10 |       ref="meta">
 11 |       <div class="description"
 12 |         v-if="$slots.default">
 13 |         <slot></slot>
 14 |       </div>
 15 |       <div class="highlight">
 16 |         <slot name="highlight"></slot>
 17 |       </div>
 18 |     </div>
 19 |     <div class="demo-block-control"
 20 |       ref="control"
 21 |       :class="{ 'is-fixed': fixedControl }"
 22 |       @click="isExpanded = !isExpanded">
 23 |       <transition name="arrow-slide">
 24 |         <i :class="[iconClass, { 'hovering': hovering }]"></i>
 25 |       </transition>
 26 |       <transition name="text-slide">
 27 |         <span v-show="hovering">{{ controlText }}</span>
 28 |       </transition>
 29 |       <!-- <el-tooltip effect="dark"
 30 |         :content="langConfig['tooltip-text']"
 31 |         placement="right">
 32 |         <transition name="text-slide">
 33 |           <el-button v-show="hovering || isExpanded"
 34 |             size="small"
 35 |             type="text"
 36 |             class="control-button"
 37 |             @click.stop="goCodepen">
 38 |             {{ langConfig['button-text'] }}
 39 |           </el-button>
 40 |         </transition>
 41 |       </el-tooltip> -->
 42 |     </div>
 43 |   </div>
 44 | </template>
 45 | 
 46 | <style lang="scss">
 47 | .demo-block {
 48 |   border: solid 1px #ebebeb;
 49 |   border-radius: 3px;
 50 |   transition: 0.2s;
 51 |   &.hover {
 52 |     box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6),
 53 |       0 2px 4px 0 rgba(232, 237, 250, 0.5);
 54 |   }
 55 |   code {
 56 |     font-family: Menlo, Monaco, Consolas, Courier, monospace;
 57 |   }
 58 |   .demo-button {
 59 |     float: right;
 60 |   }
 61 |   .source {
 62 |     padding: 24px;
 63 |   }
 64 |   .meta {
 65 |     background-color: #fafafa;
 66 |     border-top: solid 1px #eaeefb;
 67 |     overflow: hidden;
 68 |     height: 0;
 69 |     transition: height 0.2s;
 70 |   }
 71 |   .description {
 72 |     padding: 20px;
 73 |     box-sizing: border-box;
 74 |     border: solid 1px #ebebeb;
 75 |     border-radius: 3px;
 76 |     font-size: 14px;
 77 |     line-height: 22px;
 78 |     color: #666;
 79 |     word-break: break-word;
 80 |     margin: 10px;
 81 |     background-color: #fff;
 82 |     p {
 83 |       margin: 0;
 84 |       line-height: 26px;
 85 |     }
 86 |     code {
 87 |       color: #5e6d82;
 88 |       background-color: #e6effb;
 89 |       margin: 0 4px;
 90 |       display: inline-block;
 91 |       padding: 1px 5px;
 92 |       font-size: 12px;
 93 |       border-radius: 3px;
 94 |       height: 18px;
 95 |       line-height: 18px;
 96 |     }
 97 |   }
 98 |   .highlight {
 99 |     pre {
100 |       margin: 0;
101 |     }
102 |     code.hljs {
103 |       margin: 0;
104 |       border: none;
105 |       max-height: none;
106 |       border-radius: 0;
107 |       &::before {
108 |         content: none;
109 |       }
110 |     }
111 |   }
112 |   .demo-block-control {
113 |     border-top: solid 1px #eaeefb;
114 |     height: 44px;
115 |     box-sizing: border-box;
116 |     background-color: #fff;
117 |     border-bottom-left-radius: 4px;
118 |     border-bottom-right-radius: 4px;
119 |     text-align: center;
120 |     margin-top: -1px;
121 |     color: #d3dce6;
122 |     cursor: pointer;
123 |     position: relative;
124 | 
125 |     &.is-fixed {
126 |       position: fixed;
127 |       bottom: 0;
128 |       width: 718px;
129 |       z-index: 1;
130 |     }
131 |     i {
132 |       font-size: 16px;
133 |       line-height: 44px;
134 |       transition: 0.3s;
135 |       &.hovering {
136 |         transform: translateX(-40px);
137 |       }
138 |     }
139 |     > span {
140 |       position: absolute;
141 |       transform: translateX(-30px);
142 |       font-size: 14px;
143 |       line-height: 44px;
144 |       transition: 0.3s;
145 |       display: inline-block;
146 |     }
147 |     &:hover {
148 |       color: #409eff;
149 |       background-color: #f9fafc;
150 |     }
151 |     & .text-slide-enter,
152 |     & .text-slide-leave-active {
153 |       opacity: 0;
154 |       transform: translateX(10px);
155 |     }
156 | 
157 |     .control-button {
158 |       line-height: 26px;
159 |       position: absolute;
160 |       top: 0;
161 |       right: 0;
162 |       font-size: 14px;
163 |       padding-left: 5px;
164 |       padding-right: 25px;
165 |     }
166 |   }
167 |   table {
168 |     margin: 0;
169 |     display: table;
170 |   }
171 |   th,
172 |   td,
173 |   tr {
174 |     border: 0;
175 |   }
176 | }
177 | .el-popper {
178 |   table {
179 |     margin: 0;
180 |     display: table;
181 |   }
182 |   th,
183 |   td,
184 |   tr {
185 |     border: 0;
186 |   }
187 |   tr:nth-child(2n) {
188 |     background: none;
189 |   }
190 | }
191 | </style>
192 | 
193 | <script type="text/babel">
194 | import compoLang from './i18n.json'
195 | export default {
196 |   name: 'DemoBlock',
197 |   data () {
198 |     return {
199 |       codepen: {
200 |         script: '',
201 |         html: '',
202 |         style: ''
203 |       },
204 |       hovering: false,
205 |       isExpanded: false,
206 |       fixedControl: false,
207 |       scrollParent: null
208 |     }
209 |   },
210 |   methods: {
211 |     goCodepen () {
212 | 
213 |     },
214 |     scrollHandler () {
215 |       const { top, bottom, left } = this.$refs.meta.getBoundingClientRect()
216 |       this.fixedControl = bottom > document.documentElement.clientHeight &&
217 |           top + 44 <= document.documentElement.clientHeight
218 |       // this.$refs.control.style.left = this.fixedControl ? `${left}px` : '0'
219 |     },
220 |     removeScrollHandler () {
221 |       this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler)
222 |     }
223 |   },
224 |   computed: {
225 |     lang () {
226 |       return this.$route.path.split('/')[1]
227 |     },
228 |     langConfig () {
229 |       return compoLang.filter(config => config.lang === this.lang)[0]['demo-block']
230 |     },
231 |     blockClass () {
232 |       return `demo-${this.lang} demo-${this.$router.currentRoute.path.split('/').pop()}`
233 |     },
234 |     iconClass () {
235 |       return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
236 |     },
237 |     controlText () {
238 |       return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text']
239 |     },
240 |     codeArea () {
241 |       return this.$el.getElementsByClassName('meta')[0]
242 |     },
243 |     codeAreaHeight () {
244 |       if (this.$el.getElementsByClassName('description').length > 0) {
245 |         return this.$el.getElementsByClassName('description')[0].clientHeight +
246 |             this.$el.getElementsByClassName('highlight')[0].clientHeight + 20
247 |       }
248 |       return this.$el.getElementsByClassName('highlight')[0].clientHeight
249 |     }
250 |   },
251 |   watch: {
252 |     isExpanded (val) {
253 |       this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0'
254 |       if (!val) {
255 |         this.fixedControl = false
256 |         // this.$refs.control.style.left = '0'
257 |         this.removeScrollHandler()
258 |         return
259 |       }
260 |       setTimeout(() => {
261 |         this.scrollParent = window
262 |         this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler)
263 |         this.scrollHandler()
264 |       }, 200)
265 |     }
266 |   },
267 |   created () {
268 |     const highlight = this.$slots.highlight
269 |     if (highlight && highlight[0]) {
270 |       let code = ''
271 |       let cur = highlight[0]
272 |       if (cur.tag === 'pre' && (cur.children && cur.children[0])) {
273 |         cur = cur.children[0]
274 |         if (cur.tag === 'code') {
275 |           code = cur.children[0].text
276 |         }
277 |       }
278 |     }
279 |   },
280 |   mounted () {
281 |     this.$nextTick(() => {
282 |       let highlight = this.$el.getElementsByClassName('highlight')[0]
283 |       if (this.$el.getElementsByClassName('description').length === 0) {
284 |         highlight.style.width = '100%'
285 |         highlight.borderRight = 'none'
286 |       }
287 |     })
288 |   },
289 |   beforeDestroy () {
290 |     this.removeScrollHandler()
291 |   }
292 | }
293 | </script>
294 | 


--------------------------------------------------------------------------------
/docs/zh/guide/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | sidebar: auto
  3 | ---
  4 | 
  5 | # 使用示例
  6 | 
  7 | ## 基本使用
  8 | 
  9 | ### 基础表格
 10 | 基础的表格展示用法。
 11 | 
 12 | <demo-block>
 13 |   <example-zh-basis-table slot="source"></example-zh-basis-table>
 14 |   <<< @/docs/.vuepress/components/example/zh/basis-table.vue
 15 | </demo-block>
 16 | 
 17 | ### 表格对齐
 18 | 表格头部及内容的对齐方式。
 19 | 
 20 | <demo-block>
 21 |   <example-zh-align-table slot="source"></example-zh-align-table>
 22 |   默认表头及表格内容左对齐，可以分别设置不同字段的表头及表格内容对齐方式。
 23 | 
 24 |   `lb-table`设置`align`属性可以设置整体表格的对齐方式，默认`left`左对齐，可配置项：`left`、`center`、`right`。
 25 | 
 26 |   `column`中可单独为某个字段配置`align`，优先级`column配置的align` > `lb-table配置的align`。
 27 |   
 28 |   表头对齐`header-align`同理，如果不设置对齐方式同`column`和`lb-table`设置的`align`
 29 | 
 30 |   <<< @/docs/.vuepress/components/example/zh/align-table.vue
 31 | </demo-block>
 32 | 
 33 | ### 带斑马纹表格
 34 | 使用带斑马纹的表格，可以更容易区分出不同行的数据。
 35 | 
 36 | <demo-block>
 37 |   <example-zh-stripe-table slot="source"></example-zh-stripe-table>
 38 |   <<< @/docs/.vuepress/components/example/zh/stripe-table.vue
 39 | </demo-block>
 40 | 
 41 | ### 带边框表格
 42 | 
 43 | <demo-block>
 44 |   <example-zh-border-table slot="source"></example-zh-border-table>
 45 |   <<< @/docs/.vuepress/components/example/zh/border-table.vue
 46 | </demo-block>
 47 | 
 48 | ### 带状态表格
 49 | 可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。
 50 | 
 51 | <demo-block>
 52 |   <example-zh-status-table slot="source"></example-zh-status-table>
 53 |   可以通过指定 Table 组件的 `row-class-name` 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
 54 | 
 55 |   <<< @/docs/.vuepress/components/example/zh/status-table.vue
 56 | </demo-block>
 57 | 
 58 | ### 固定表头
 59 | 
 60 | 纵向内容过多时，可选择固定表头。
 61 | 
 62 | <demo-block>
 63 |   <example-zh-fixed-header-table slot="source"></example-zh-fixed-header-table>
 64 |   只要在`lb-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码。
 65 | 
 66 |   <<< @/docs/.vuepress/components/example/zh/fixed-header-table.vue
 67 | </demo-block>
 68 | 
 69 | 
 70 | ### 固定列
 71 | 横向内容过多时，可选择固定列。
 72 | 
 73 | <demo-block>
 74 |   <example-zh-fixed-column-table slot="source"></example-zh-fixed-column-table>
 75 |   固定列需要在`column`属性中配置`fixed`属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。
 76 | 
 77 |   <<< @/docs/.vuepress/components/example/zh/fixed-column-table.vue
 78 | </demo-block>
 79 | 
 80 | ### 流体高度
 81 | 当数据量动态变化时，可以为 Table 设置一个最大高度。
 82 | 
 83 | <demo-block>
 84 |   <example-zh-fluid-height-table slot="source"></example-zh-fluid-height-table>
 85 |   通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
 86 | 
 87 |   <<< @/docs/.vuepress/components/example/zh/fluid-height-table.vue
 88 | </demo-block>
 89 | 
 90 | ### 多级表头
 91 | 数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
 92 | 
 93 | <demo-block>
 94 |   <example-zh-multi-header-table slot="source"></example-zh-multi-header-table>
 95 |   通过设置`column`中的`children`进行表格头嵌套，理论支持无限极嵌套，嵌套也支持自定义表头及列数据。
 96 | 
 97 |   <<< @/docs/.vuepress/components/example/zh/multi-header-table.vue
 98 | </demo-block>
 99 | 
100 | ### 单选
101 | 选择单行数据时使用色块表示。
102 | 
103 | <demo-block>
104 |   <example-zh-radio-table slot="source"></example-zh-radio-table>
105 |   同 `El-Table` 组件，只需要配置`highlight-current-row`属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入`currentRow`，`oldCurrentRow`。
106 |   如果需要显示索引，可设置索引列`type`属性为`index`即可显示从 1 开始的索引号。
107 | 
108 |   <<< @/docs/.vuepress/components/example/zh/radio-table.vue
109 | </demo-block>
110 | 
111 | ### 多选
112 | 选择多行数据时使用 Checkbox。
113 | 
114 | <demo-block>
115 |   <example-zh-multiple-table slot="source"></example-zh-multiple-table>
116 |   设置`type`为`selection`即可。
117 | 
118 |   <<< @/docs/.vuepress/components/example/zh/multiple-table.vue
119 | </demo-block>
120 | 
121 | ### 排序
122 | 对表格进行排序，可快速查找或对比数据
123 | 
124 | <demo-block>
125 |   <example-zh-sort-table slot="source"></example-zh-sort-table>
126 |   在`column`相应列设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。可以通过 `lb-table` 的default-sort属性设置默认的排序列和排序顺序。可以使用`sort-method`或者`sort-by`使用自定义的排序规则。如果需要后端排序，需将`sortable`设置为`custom`，同时在 `lb-table` 上监听`sort-change`事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
127 | 
128 |   <<< @/docs/.vuepress/components/example/zh/sort-table.vue
129 | </demo-block>
130 | 
131 | ### 筛选
132 | 对表格进行筛选，可快速查找到自己想看的数据。
133 | 
134 | <demo-block>
135 |   <example-zh-filter-table slot="source"></example-zh-filter-table>
136 |   在列中设置 `filters` `filter-method`属性即可开启该列的筛选，`filters` 是一个数组，`filter-method` 是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
137 | 
138 |   <<< @/docs/.vuepress/components/example/zh/filter-table.vue
139 | </demo-block>
140 | 
141 | ### 展开行
142 | 当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。
143 | 
144 | <demo-block>
145 |   <example-zh-expand-row-table slot="source"></example-zh-expand-row-table>
146 |   通过设置 `type="expand"`可以开启展开行功能，展开行的内容可以通过`render`自定义
147 | 
148 |   <<< @/docs/.vuepress/components/example/zh/expand-row-table.vue
149 | </demo-block>
150 | 
151 | ### 自定义列模板
152 | 自定义列的显示内容，可组合其他组件使用。
153 | 
154 | <demo-block>
155 |   <example-zh-render-table slot="source"></example-zh-render-table>
156 |   暂不支持官方`<template slot-scope="scope"></template>`用法自定义，统一使用`render`和`JSX`写法。`render`参考[官网文档](https://cn.vuejs.org/v2/guide/render-function.html)。个人觉得`JSX`写法更简洁舒服些，后面的相关示例都是`JSX`写法，
157 |   `vue-cli-2`脚手架搭建的项目如需支持`JSX`，请参考配置：[点击前往](https://github.com/vuejs/babel-plugin-transform-vue-jsx)，如需支持`v-model`写法，请安装配置：[点击前往](https://github.com/nickmessing/babel-plugin-jsx-v-model)。
158 |   `vue-cli-3`脚手架自带，可直接使用`JSX`,`JSX`写法参考同上地址。
159 | 
160 |   <<< @/docs/.vuepress/components/example/zh/render-table.vue
161 | </demo-block>
162 | 
163 | ### 树形数据与懒加载
164 | 2.8.0+版本支持树形表格
165 | 
166 | <demo-block>
167 |   <example-zh-tree-table slot="source"></example-zh-tree-table>
168 |   用法同`el-table`，当 `row` 中包含 `children` 字段时，被视为树形数据。渲染树形数据时，必须要指定 `row-key`。支持子节点数据异步加载。设置 Table 的 `lazy` 属性为 true 与加载函数 `load` 。通过指定 `row` 中的 `hasChildren` 字段来指定哪些行是包含子节点。`children` 与 `hasChildren` 都可以通过 `tree-props` 配置。
169 | 
170 |   <<< @/docs/.vuepress/components/example/zh/tree-table.vue
171 | </demo-block>
172 | 
173 | ### 自定义表头
174 | 表头支持自定义。
175 | 
176 | <demo-block>
177 |   <example-zh-render-header-table slot="source"></example-zh-render-header-table>
178 |   通过设置`renderHeader`来自定义表头，写法同`自定义列模板`
179 | 
180 |   ::: tip
181 |   由于`vuepress`不支持`JSX`的`v-model`，所以示例代码使用的`value`、`onInput`实现的双向绑定，正常环境下可直接使用`v-model`
182 |   :::
183 | 
184 |   <<< @/docs/.vuepress/components/example/zh/render-header-table.vue
185 | </demo-block>
186 | 
187 | ### 表尾合计行
188 | 若表格展示的是各类数字，可以在表尾显示各列的合计。
189 | 
190 | <demo-block>
191 |   <example-zh-footer-total-table slot="source"></example-zh-footer-total-table>
192 |   将`show-summary`设置为`true`就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过`sum-text`配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用`summary-method`并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
193 | 
194 |   <<< @/docs/.vuepress/components/example/zh/footer-total-table.vue
195 | </demo-block>
196 | 
197 | ### 自定义索引
198 | 若表格展示的是各类数字，可以在表尾显示各列的合计。
199 | 
200 | <demo-block>
201 |   <example-zh-custom-index-table slot="source"></example-zh-custom-index-table>
202 |   通过给 `type=index` 的列传入 `index` 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
203 | 
204 |   <<< @/docs/.vuepress/components/example/zh/custom-index-table.vue
205 | </demo-block>
206 | 
207 | ### 合并行或列
208 | 多行或多列共用一个数据时，可以合并行或列。
209 | 
210 | <demo-block>
211 |   <example-zh-merge-row-column-table slot="source"></example-zh-merge-row-column-table>
212 |   通过给`lb-table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象。
213 | 
214 |   <<< @/docs/.vuepress/components/example/zh/merge-row-column-table.vue
215 | </demo-block>
216 | 
217 | ## 扩展使用
218 | 
219 | ### 表格分页
220 | 表格支持开启分页显示
221 | 
222 | <demo-block>
223 |   <example-zh-pagination-table slot="source"></example-zh-pagination-table>
224 |   `lb-table`设置属性`pagination`即可开启分页，分页相关参数及用法同`el-pagination`。暂时新增几个新参数，`paginationTop`表示分页距离表格的间距，默认`15px`,`paginationAlign`分页的对齐方式，默认为`right`,分页整体显示在右侧，可配置`left`、`center`、`right`
225 | 
226 |   ::: tip
227 |   由于分页和表格的`current-change`冲突，所以分页请使用`p-current-change`
228 |   :::
229 | 
230 |   <<< @/docs/.vuepress/components/example/zh/pagination-table.vue
231 | </demo-block>
232 | 
233 | ### 表格动态合并
234 | 支持表格动态合并
235 | 
236 | <demo-block>
237 |   <example-zh-merge-table slot="source"></example-zh-merge-table>
238 |   `lb-table`上配置`merge`,`merge`为一个包含需要合并的`column`中`prop`的数组，配置后会自动将值相同的项自动合并。
239 | 
240 |   <<< @/docs/.vuepress/components/example/zh/merge-table.vue
241 | </demo-block>
242 | 
243 | ### 普通形式表格编辑
244 | 数据简单的情况下，可以通过点击编辑按钮直接进行表格的编辑、保存、取消操作
245 | 
246 | <demo-block>
247 |   <example-zh-edit-table slot="source"></example-zh-edit-table>
248 |   由于编辑模式下数据格式不统一，如日期数据通过`DatePicker`选择，普通的文本通过`Input`，下拉选择的通过`ElSelect`等，所以就不进行整合了，
249 |   大家可以通过`render`自定义出任意效果的编辑模式，原理就是根据是否是编辑模式的字段，渲染不同的内容，
250 |   如本例中的`_edit`,为`true`的情况下渲染相应的编辑模式下的组件，否则就是普通的文本。
251 | 
252 |   由于编辑模式中有取消，所以取消的时候得还原原数据，可以通过定义一个`defaultData`,该值为`JSON.parse(JSON.stringify(this.tableData.data))`,
253 |   加`JSON.parse`和`JSON.stringify`防止`defaultData`数据随着`this.tableData.data`的改变而改变，取消的时候通过`$index`索引从`defaultData`中拿到原数据，
254 |   然后根据`$index`索引修改`this.tableData.data`的数据
255 | 
256 |   ::: tip
257 |   由于`vuepress`不支持`JSX`的`v-model`，所以示例代码使用的`value`、`onChange`、`onInput`实现的双向绑定，正常环境下可直接使用`v-model`
258 |   :::
259 | 
260 |   <<< @/docs/.vuepress/components/example/zh/edit-table.vue
261 | </demo-block>
262 | 
263 | ### 弹窗形式表格编辑
264 | 数据复杂的情况，建议通过弹窗形式进行数据编辑的操作
265 | 
266 | <demo-block>
267 |   <example-zh-edit-dialog-table slot="source"></example-zh-edit-dialog-table>
268 | 
269 |   <<< @/docs/.vuepress/components/example/zh/edit-dialog-table.vue
270 | </demo-block>
271 | 


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