├── .eslintignore
├── renovate.json
├── .npmignore
├── jsconfig.json
├── src
    ├── main.js
    ├── utils
    │   └── type.js
    └── components
    │   └── Table
    │       ├── ComponentsMapping.vue
    │       ├── ElementsMapping.vue
    │       └── index.vue
├── example
    ├── src
    │   ├── views
    │   │   └── ExampleTable.vue
    │   ├── components
    │   │   ├── data.js
    │   │   ├── Layout.vue
    │   │   ├── table-children-b.vue
    │   │   ├── table-children-a.vue
    │   │   ├── banner.vue
    │   │   └── table-list.vue
    │   ├── styles
    │   │   └── variables.scss
    │   └── directive
    │   │   └── clipboard.js
    ├── router.js
    ├── main.js
    ├── App.vue
    └── index.html
├── .gitignore
├── LICENSE
├── babel.config.js
├── .eslintrc.js
├── README.md
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | public/
3 | build/
4 | config/
5 | dist/
6 | lib/
7 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "config:base"
4 |   ],
5 |   "pin": false
6 | }
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .git
 2 | CVS
 3 | .svn
 4 | .hg
 5 | .lock-wscript
 6 | .wafpickle-N
 7 | .*.swp
 8 | .DS_Store
 9 | ._*
10 | yarn.lock
11 | npm-debug.log
12 | .npmrc
13 | node_modules
14 | config.gypi
15 | *.orig
16 | package-lock.json
17 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": "./",
 4 |     "module": "commonjs",
 5 |     "paths": {
 6 |       "root/*": ["./*"],
 7 |       "@/*": ["./src/*"],
 8 |       "example/*": ["./example/src/*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules"]
12 | }
13 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import HocElTable from '@/components/Table'
 2 | 
 3 | const install = function (app) {
 4 |   app.component('HocElTable', HocElTable)
 5 | }
 6 | 
 7 | if (typeof window !== 'undefined' && window.Vue) {
 8 |   install(window.Vue)
 9 | }
10 | 
11 | export default {
12 |   version: '2.2.0',
13 |   install,
14 |   HocElTable
15 | }
16 | 


--------------------------------------------------------------------------------
/example/src/views/ExampleTable.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <TableList />
 3 | </template>
 4 | 
 5 | <script>
 6 | import TableList from 'example/components/table-list'
 7 | import { defineComponent } from 'vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'ExampleTable',
11 |   components: {
12 |     TableList
13 |   }
14 | })
15 | </script>
16 | 


--------------------------------------------------------------------------------
/example/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | 
 3 | const importModule = (filePath) => {
 4 |   return () => import(`example/${filePath}`)
 5 | }
 6 | 
 7 | const routes = [{
 8 |   path: '/',
 9 |   component: importModule('views/ExampleTable')
10 | }]
11 | 
12 | export default createRouter({
13 |   routes,
14 |   history: createWebHistory()
15 | })
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /dist
13 | /dist-ssr
14 | /lib
15 | 
16 | # misc
17 | .DS_Store
18 | *.local
19 | .vscode/
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .eslintcache
25 | 


--------------------------------------------------------------------------------
/example/src/components/data.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data: [
 3 |     { id: 0, name: '王小虎1', isForbid: false },
 4 |     { id: 1, name: '王小虎2', isForbid: false },
 5 |     { id: 2, name: '王小虎3', isForbid: false }
 6 |   ],
 7 |   meta: {
 8 |     pagination: {
 9 |       total: 3,
10 |       count: 10,
11 |       perPage: 10,
12 |       currentPage: 1,
13 |       totalPages: 1
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import router from './router.js'
 3 | import ElementPlus from 'element-plus'
 4 | 
 5 | // import HocElTable from 'root/lib/hoc-el-table' // Switch to bundle lib
 6 | import HocElTable from '@/main.js'
 7 | import App from './App.vue'
 8 | 
 9 | import 'example/styles/variables.scss'
10 | 
11 | createApp(App)
12 |   .use(router)
13 |   .use(ElementPlus)
14 |   .use(HocElTable)
15 |   .mount('#app')
16 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view v-slot="{ Component }">
 3 |     <component :is="Component" />
 4 |   </router-view>
 5 | </template>
 6 | <script>
 7 | import { defineComponent } from 'vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'App'
11 | })
12 | 
13 | </script>
14 | <style lang="scss">
15 | * {
16 |   margin: 0;
17 |   padding: 0;
18 | }
19 | #app {
20 |   font-family: Avenir, Helvetica, Arial, sans-serif;
21 |   -webkit-font-smoothing: antialiased;
22 |   -moz-osx-font-smoothing: grayscale;
23 |   color: #2c3e50;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title></title>
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 |   <meta name="renderer" content="webkit" />
 8 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 9 |   <meta charset="utf-8" />
10 |   <meta http-equiv="Content-Language" content="zh-CN" />
11 |   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
12 | </head>
13 | <body>
14 |   <div id="app"></div>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/example/src/components/Layout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view v-slot="{ Component }">
 3 |     <component :is="Component" />
 4 |   </router-view>
 5 | </template>
 6 | <script>
 7 | import { defineComponent } from 'vue'
 8 | 
 9 | export default defineComponent({
10 |   name: 'Layout'
11 | })
12 | </script>
13 | 
14 | <style>
15 | * {
16 |   margin: 0;
17 |   padding: 0;
18 |  }
19 | body {
20 |   -moz-osx-font-smoothing: grayscale;
21 |   -webkit-font-smoothing: antialiased;
22 |   text-rendering: optimizeLegibility;
23 |   font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
24 | }
25 | 
26 | html {
27 |   box-sizing: border-box;
28 |   font-size: 14px;
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/example/src/components/table-children-b.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="demo-image">
 3 |     <el-image
 4 |       style="width: 100px; height: 100px"
 5 |       :src="url"
 6 |       fit="contain"
 7 |     />
 8 |     <p>{{ modelValue }}</p>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { defineComponent, ref } from 'vue'
14 | 
15 | export default defineComponent({
16 |   props: {
17 |     modelValue: {
18 |       type: Object,
19 |       default () {
20 |         return {}
21 |       }
22 |     }
23 |   },
24 |   setup () {
25 |     return {
26 |       url: ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
27 |     }
28 |   }
29 | })
30 | </script>
31 | 
32 | <style lang="scss" scoped>
33 | .demo-image {
34 |   text-align: center;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/utils/type.js:
--------------------------------------------------------------------------------
 1 | const toString = Object.prototype.toString
 2 | 
 3 | export function isFunction (obj) {
 4 |   return typeof (obj) === 'function'
 5 | }
 6 | 
 7 | export function isObject (obj) {
 8 |   return obj === Object(obj)
 9 | }
10 | 
11 | export function isArray (obj) {
12 |   return toString.call(obj) === '[object Array]'
13 | }
14 | 
15 | export function isDate (obj) {
16 |   return toString.call(obj) === '[object Date]'
17 | }
18 | 
19 | export function isRegExp (obj) {
20 |   return toString.call(obj) === '[object RegExp]'
21 | }
22 | export function isBoolean (obj) {
23 |   return toString.call(obj) === '[object Boolean]'
24 | }
25 | 
26 | export function isNumberical (obj) {
27 |   return (typeof (obj) === 'number' || typeof (obj) === 'string') && !isNaN(obj - parseFloat(obj))
28 | }
29 | 


--------------------------------------------------------------------------------
/example/src/styles/variables.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | /* theme color */
 3 | $--color-primary: #b38358;
 4 | $--color-success: #52C41A;
 5 | $--color-warning: #FAAD14;
 6 | $--color-danger: #FA5555;
 7 | $--color-info: #909399;
 8 | 
 9 | 
10 | // 按需导入，重写覆盖自己所需样式
11 | @forward "element-plus/theme-chalk/src/common/var.scss" with (
12 |   $colors: (
13 |     "primary": (
14 |       "base": $--color-primary,
15 |     ),
16 |     "success": (
17 |       "base":  $--color-success,
18 |     ),
19 |     "warning": (
20 |       "base":  $--color-warning,
21 |     ),
22 |     "danger": (
23 |       "base":  $--color-danger,
24 |     ),
25 |     "info": (
26 |       "base":  $--color-info,
27 |     ),
28 |     
29 |   ),
30 |   $border-radius: (
31 |     'base': 4px,
32 |     'small': 2px,
33 |     'round': 20px,
34 |     'circle': 100%,
35 |   ),
36 | );
37 | 
38 | @import 'element-plus/theme-chalk/src/index.scss';
39 | 


--------------------------------------------------------------------------------
/src/components/Table/ComponentsMapping.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <component
 4 |       :is="item.name"
 5 |       v-for="(item, index) in getCellList"
 6 |       :key="index"
 7 |       v-model="item.data"
 8 |       :row="row"
 9 |     />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { defineComponent, getCurrentInstance, ref } from 'vue'
15 | 
16 | export default defineComponent({
17 |   props: {
18 |     parent: {
19 |       type: Object,
20 |       default () {
21 |         return {}
22 |       }
23 |     },
24 |     row: {
25 |       type: Object,
26 |       default () {
27 |         return {}
28 |       }
29 |     },
30 |     cellList: {
31 |       type: Array,
32 |       default () {
33 |         return []
34 |       }
35 |     }
36 |   },
37 |   setup (props) {
38 |     const { proxy } = getCurrentInstance()
39 |     proxy.$.components = props.parent.$options.components
40 |     return {
41 |       getCellList: ref(props.cellList)
42 |     }
43 |   }
44 | })
45 | </script>
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020-present, Wisdom
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/example/src/components/table-children-a.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="block">
 4 |       <span class="demonstration">轮播组件</span>
 5 |       <el-carousel height="150px">
 6 |         <el-carousel-item
 7 |           v-for="item in 3"
 8 |           :key="item"
 9 |         >
10 |           <h3 class="small">
11 |             {{ modelValue }}
12 |           </h3>
13 |         </el-carousel-item>
14 |       </el-carousel>
15 |     </div>
16 |   </div>
17 | </template>
18 | <script>
19 | import { defineComponent } from 'vue'
20 | 
21 | export default defineComponent({
22 |   props: {
23 |     modelValue: {
24 |       type: Object,
25 |       default () {
26 |         return {}
27 |       }
28 |     }
29 |   }
30 | })
31 | </script>
32 | <style>
33 |   .block {
34 |     text-align: center;
35 |   }
36 |   .el-carousel__item h3 {
37 |     color: #475669;
38 |     font-size: 14px;
39 |     opacity: 0.75;
40 |     line-height: 150px;
41 |     margin: 0;
42 |   }
43 | 
44 |   .el-carousel__item:nth-child(2n) {
45 |      background-color: #99a9bf;
46 |   }
47 | 
48 |   .el-carousel__item:nth-child(2n+1) {
49 |      background-color: #d3dce6;
50 |   }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const babelConfig = {
 2 |   presets: [
 3 |     [
 4 |       '@babel/preset-env',
 5 |       {
 6 |         targets: {
 7 |           chrome: '58',
 8 |           ie: '11'
 9 |         }
10 |       }
11 |     ]
12 |   ],
13 |   plugins: [
14 |     [
15 |       '@babel/plugin-transform-runtime',
16 |       {
17 |         corejs: false,
18 |         helpers: true,
19 |         regenerator: true,
20 |         useESModules: false
21 |       }
22 |     ],
23 |     '@babel/plugin-syntax-dynamic-import',
24 |     '@babel/plugin-syntax-import-meta',
25 |     ['@babel/plugin-proposal-class-properties', { loose: false }],
26 |     ['@babel/plugin-proposal-private-methods', { loose: false }],
27 |     '@babel/plugin-proposal-json-strings',
28 |     [
29 |       '@babel/plugin-proposal-decorators',
30 |       {
31 |         legacy: true
32 |       }
33 |     ],
34 |     '@babel/plugin-proposal-function-sent',
35 |     '@babel/plugin-proposal-export-default-from',
36 |     '@babel/plugin-proposal-export-namespace-from',
37 |     '@babel/plugin-proposal-numeric-separator',
38 |     '@babel/plugin-proposal-throw-expressions',
39 |     '@babel/plugin-transform-modules-commonjs'
40 |   ]
41 | }
42 | 
43 | module.exports = babelConfig
44 | 


--------------------------------------------------------------------------------
/example/src/directive/clipboard.js:
--------------------------------------------------------------------------------
 1 | import Clipboard from 'clipboard'
 2 | 
 3 | const clipboard = {
 4 |   beforeMount: function (el, binding, vnode) {
 5 |     if (binding.arg === 'success') {
 6 |       el._v_clipboard_success = binding.value
 7 |     } else if (binding.arg === 'error') {
 8 |       el._v_clipboard_error = binding.value
 9 |     } else {
10 |       const clipboard = new Clipboard(el, {
11 |         text: function () { return binding.value },
12 |         action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
13 |       })
14 |       clipboard.on('success', function (e) {
15 |         const callback = el._v_clipboard_success
16 |         callback && callback(e)
17 |       })
18 |       clipboard.on('error', function (e) {
19 |         const callback = el._v_clipboard_error
20 |         callback && callback(e)
21 |       })
22 |       el._v_clipboard = clipboard
23 |     }
24 |   },
25 |   updated: function (el, binding) {
26 |     if (binding.arg === 'success') {
27 |       el._v_clipboard_success = binding.value
28 |     } else if (binding.arg === 'error') {
29 |       el._v_clipboard_error = binding.value
30 |     } else {
31 |       el._v_clipboard.text = function () { return binding.value }
32 |       el._v_clipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
33 |     }
34 |   },
35 |   unmounted: function (el, binding) {
36 |     if (binding.arg === 'success') {
37 |       delete el._v_clipboard_success
38 |     } else if (binding.arg === 'error') {
39 |       delete el._v_clipboard_error
40 |     } else {
41 |       el._v_clipboard.destroy()
42 |       delete el._v_clipboard
43 |     }
44 |   }
45 | }
46 | 
47 | export {
48 |   clipboard
49 | }
50 | 


--------------------------------------------------------------------------------
/example/src/components/banner.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="banner">
 3 |     <div class="repo">
 4 |       <p>📦 @hoc-element/table</p><a
 5 |         href="https://github.com/pdsuwwz/hoc-element-table"
 6 |         target="_blank"
 7 |       ><svg
 8 |         height="32"
 9 |         viewBox="0 0 16 16"
10 |         version="1.1"
11 |         width="32"
12 |         aria-hidden="true"
13 |         class="octicon octicon-mark-github v-align-middle"
14 |       ><path
15 |         fill-rule="evenodd"
16 |         d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
17 |       /></svg></a>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import { defineComponent } from 'vue'
24 | 
25 | export default defineComponent({
26 |   name: 'Banner',
27 |   setup () {
28 | 
29 |   }
30 | })
31 | </script>
32 | 
33 | <style lang="scss" scoped>
34 | .banner {
35 |   padding: 30px 0;
36 |   background-color: #eee;
37 |   .repo {
38 |     margin: 0 auto;
39 |     display: flex;
40 |     justify-content: space-around;
41 |     align-items: center;
42 |     text-align: center;
43 |     font-size: 30px;
44 |     font-weight: 700;
45 |     a {
46 |       color: #2c3e50;
47 |       text-decoration: none;
48 |     }
49 |   }
50 | }
51 | @media screen and (min-width: 400px) {
52 |   .banner {
53 |     .repo {
54 |       width: 400px;
55 |     }
56 |   }
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |     es6: true,
 6 |     browser: true,
 7 |     jest: true
 8 |   },
 9 |   globals: {
10 |     defineProps: 'readonly',
11 |     defineEmits: 'readonly',
12 |     defineExpose: 'readonly',
13 |     withDefaults: 'readonly'
14 |   },
15 |   extends: [
16 |     'eslint:recommended',
17 |     'plugin:vue/base',
18 |     'plugin:vue/vue3-essential',
19 |     'plugin:vue/vue3-strongly-recommended',
20 |     'plugin:vue/vue3-recommended'
21 |   ],
22 |   parserOptions: {
23 |     ecmaFeatures: {
24 |       legacyDecorators: true
25 |     },
26 |     parser: '@babel/eslint-parser'
27 |   },
28 |   rules: {
29 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
30 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
31 | 
32 |     // vue
33 |     'vue/multi-word-component-names': 0,
34 |     'vue/no-unused-components': 1,
35 |     'vue/no-mutating-props': 0,
36 |     'vue/script-setup-uses-vars': 'error',
37 |     'vue/html-self-closing': ['error', {
38 |       html: {
39 |         void: 'never',
40 |         normal: 'never',
41 |         component: 'always'
42 |       },
43 |       svg: 'always',
44 |       math: 'always'
45 |     }],
46 | 
47 |     // js
48 |     'no-unused-vars': 1,
49 |     'no-undef': 1,
50 |     // https://eslint.org/docs/rules/no-var
51 |     'no-var': 'error',
52 |     // https://cn.eslint.org/docs/rules/no-trailing-spaces
53 |     'no-trailing-spaces': 2, // 禁用行尾空白
54 |     'comma-style': ['error', 'last'],
55 |     'comma-dangle': ['error', 'never'],
56 |     'no-irregular-whitespace': 2,
57 |     'no-multi-spaces': 1,
58 |     'no-multiple-empty-lines': [
59 |       2,
60 |       {
61 |         max: 1
62 |       }
63 |     ],
64 |     // https://cn.eslint.org/docs/rules/eol-last
65 |     'eol-last': 2,
66 |     quotes: [
67 |       'error',
68 |       'single',
69 |       {
70 |         avoidEscape: true,
71 |         allowTemplateLiterals: true
72 |       }
73 |     ],
74 |     // https://eslint.org/docs/rules/prefer-const
75 |     'prefer-const': 2,
76 |     camelcase: ['error', { properties: 'never' }],
77 |     indent: ['error', 2, { SwitchCase: 1 }],
78 |     semi: ['error', 'never'],
79 |     'space-before-function-paren': 'error'
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # @hoc-element/table
 2 | 
 3 | [![npm](https://img.shields.io/npm/v/@hoc-element/table)](https://www.npmjs.com/package/@hoc-element/table)
 4 | [![license](https://img.shields.io/npm/l/@hoc-element/table)](https://github.com/pdsuwwz/hoc-element-table/blob/main/LICENSE)
 5 | 
 6 | 📦 基于 Webpack 5 构建，重构成 Vue 3.x，二次封装了 element-plus 库中的 table，通过配置文件的方式即可生成 `table` 表格, 无需再写大量的诸如 `<el-xxx>` 的模板，实现更高的自由度，旨在减少重复的操作，让开发变得更高效。
 7 | 
 8 | > 该组件库可供学习、参考和用于二次开发
 9 | 
10 | **[Live demo](https://pdsuwwz.github.io/hoc-element-table)** 
11 | 
12 | ## Version
13 | 
14 | * Vue 3.x 版本 ｜ [Vue 2.x 版本](https://github.com/pdsuwwz/hoc-element-table/tree/vue2.0)
15 | 
16 | ## Screenshot
17 | 
18 | <img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/168956876-b2d2b710-0c32-49d5-9048-a196ac33a818.png">
19 | 
20 | ## Environment Support
21 | 
22 | * Vue 3.2.x
23 | 
24 | ## Install
25 | 
26 | ```shell
27 | npm install @hoc-element/table
28 | 
29 | # or
30 | 
31 | pnpm add @hoc-element/table
32 | ```
33 | 
34 | ## Quick Start
35 | 
36 | * 使用前请安装 [element-plus](https://www.npmjs.com/package/element-plus)
37 | 
38 | ```js
39 | import { createApp } from 'vue'
40 | import ElementPlus from 'element-plus'
41 | import HocElTable from '@hoc-element/table'
42 | import App from './App.vue'
43 | 
44 | createApp(App)
45 |   .use(ElementPlus)
46 |   .use(HocElTable)
47 |   .mount('#app')
48 | 
49 | ```
50 | 
51 | ## Changelog
52 | 
53 | Detailed changes for each release are documented in the [release notes](https://github.com/pdsuwwz/hoc-element-table/releases)
54 | 
55 | ## Feature
56 | 
57 | - [x] 基于 Webpack 5 构建
58 | - [x] 全面支持 Vue 3
59 | - [x] 支持 `JSON` 序列化表格快速配置
60 | - [x] 已内置 `Pagination` 分页
61 | - [x] 支持自定义 `prop` 列名
62 | - [x] 支持单元格内容自定义渲染 【见 [单元格渲染配置说明](#单元格渲染配置说明)】
63 | - [x] 支持自定义单元格 `style` 样式
64 | - [x] 支持绑定自定义指令 `directives`
65 | - [x] 支持绑定 `element-plus` 原生 `Table` 的 `Events` 和 `Methods`
66 | - [x] 支持 `Header` 和 `Pagination` 的显隐控制
67 | 
68 | ## 单元格渲染配置说明
69 | 
70 | | 方法 | 说明 | 场景 |
71 | | -------- | -------- | -------- |
72 | | --- | 渲染单元格的 attrs.prop 对应的键值 | 适用于直接显示 prop 的值场景 |
73 | | render | 渲染字符串 | 适用于对默认 prop 的值做一些微处理的场景 |
74 | | renderHTML | 渲染指定的 DOM 元素 | 适用于展示 Action，一般用在最后一列（目前只支持 el-button 的渲染，详见 Example） |
75 | | renderComponent | 渲染组件 | 适用于单元格内需要展示复杂内容的场景，详见 Example |
76 | 
77 | ## Example
78 | 
79 | 这是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： [Code](https://github.com/pdsuwwz/hoc-element-table/tree/main/example/src/components/table-list.vue)
80 | 
81 | ## Deploy
82 | 
83 | 见仓库 [📥  hoc-element-table-build](https://github.com/pdsuwwz/hoc-element-table-build)
84 | 


--------------------------------------------------------------------------------
/src/components/Table/ElementsMapping.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <script>
  3 | import {
  4 |   defineComponent,
  5 |   getCurrentInstance,
  6 |   computed,
  7 |   ref,
  8 |   h,
  9 |   withDirectives,
 10 |   resolveDirective,
 11 |   resolveComponent
 12 | } from 'vue'
 13 | export default defineComponent({
 14 |   props: {
 15 |     parent: {
 16 |       type: Object,
 17 |       default () {
 18 |         return {}
 19 |       }
 20 |     },
 21 |     row: {
 22 |       type: Object,
 23 |       default () {
 24 |         return {}
 25 |       }
 26 |     },
 27 |     cellList: {
 28 |       type: Array,
 29 |       default () {
 30 |         return []
 31 |       }
 32 |     }
 33 |   },
 34 |   setup (props) {
 35 |     const { proxy } = getCurrentInstance()
 36 |     proxy.$.components = props.parent.$options.components
 37 |     proxy.$.directives = props.parent.$options.directives
 38 | 
 39 |     const elementsMapping = ref({
 40 |       button: 'el-button'
 41 |     })
 42 | 
 43 |     const getCellList = computed(() => {
 44 |       return props.cellList.filter((cell) => cell && Object.keys(cell).length)
 45 |     })
 46 | 
 47 |     const getAttrsValue = (item) => {
 48 |       if (!item.attrs) {
 49 |         item.attrs = {}
 50 |       }
 51 | 
 52 |       const {
 53 |         class: className = null,
 54 |         style = null,
 55 |         directives = null,
 56 |         ...attrs
 57 |       } = item.attrs
 58 | 
 59 |       return {
 60 |         class: className,
 61 |         style,
 62 |         directives,
 63 |         props: attrs
 64 |       }
 65 |     }
 66 | 
 67 |     return () => {
 68 |       return h(
 69 |         'div',
 70 |         getCellList.value.map((cellItem) => {
 71 |           const comp = resolveComponent(
 72 |             elementsMapping.value[cellItem.el] ||
 73 |             cellItem.el
 74 |           )
 75 | 
 76 |           const attributes = getAttrsValue(cellItem)
 77 |           const { label, ...others } = attributes.props
 78 |           const { directives } = attributes
 79 | 
 80 |           let onClick
 81 |           if (cellItem.click) {
 82 |             onClick = cellItem.click.bind(props.parent, props.row)
 83 |           }
 84 | 
 85 |           let resultVNode = h(
 86 |             comp,
 87 |             {
 88 |               onClick,
 89 |               innerHTML: label,
 90 |               ...others
 91 |             }
 92 |           )
 93 | 
 94 |           if (directives) {
 95 |             resultVNode = withDirectives(
 96 |               resultVNode,
 97 |               [
 98 |                 ...directives.map((directiveItem) => {
 99 |                   return [
100 |                     resolveDirective(directiveItem.name),
101 |                     directiveItem.value,
102 |                     directiveItem.arg
103 |                   ]
104 |                 })
105 |               ]
106 |             )
107 |           }
108 | 
109 |           return resultVNode
110 |         })
111 |       )
112 |     }
113 |   }
114 | })
115 | </script>
116 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@hoc-element/table",
 3 |   "version": "2.2.0",
 4 |   "main": "lib/hoc-el-table.js",
 5 |   "description": "📦  A Vue3.x Table Component built on Webpack 5 that follows the Configuration",
 6 |   "author": "Wisdom <pdsu.wwz@foxmail.com>",
 7 |   "license": "MIT",
 8 |   "scripts": {
 9 |     "build": "cross-env NODE_ENV=production webpack --progress --config build/webpack.config.js",
10 |     "dev:example": "cross-env NODE_ENV=development webpack serve --progress --config build/webpack.example.js"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/pdsuwwz/hoc-element-table.git"
15 |   },
16 |   "publishConfig": {
17 |     "access": "public"
18 |   },
19 |   "peerDependencies": {
20 |     "element-plus": ">=2.0.0",
21 |     "vue": ">=3.2.0"
22 |   },
23 |   "engines": {
24 |     "node": ">=14.19.0"
25 |   },
26 |   "devDependencies": {
27 |     "@babel/core": "^7.17.12",
28 |     "@babel/eslint-parser": "^7.17.0",
29 |     "@babel/eslint-plugin": "^7.17.7",
30 |     "@babel/plugin-proposal-class-properties": "^7.17.12",
31 |     "@babel/plugin-proposal-decorators": "^7.17.12",
32 |     "@babel/plugin-proposal-export-default-from": "^7.17.12",
33 |     "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
34 |     "@babel/plugin-proposal-function-sent": "^7.17.12",
35 |     "@babel/plugin-proposal-json-strings": "^7.17.12",
36 |     "@babel/plugin-proposal-numeric-separator": "^7.16.7",
37 |     "@babel/plugin-proposal-private-methods": "^7.17.12",
38 |     "@babel/plugin-proposal-throw-expressions": "^7.16.7",
39 |     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
40 |     "@babel/plugin-syntax-import-meta": "^7.10.4",
41 |     "@babel/plugin-transform-modules-commonjs": "^7.17.12",
42 |     "@babel/plugin-transform-runtime": "^7.17.12",
43 |     "@babel/preset-env": "^7.17.12",
44 |     "@babel/runtime": "^7.17.9",
45 |     "@babel/runtime-corejs2": "^7.17.11",
46 |     "@types/lodash-es": "^4.17.6",
47 |     "@vue/compiler-sfc": "^3.2.33",
48 |     "babel-loader": "^9.0.0",
49 |     "clipboard": "^2.0.11",
50 |     "core-js": "^3.22.5",
51 |     "cross-env": "^7.0.3",
52 |     "css-loader": "^6.7.1",
53 |     "element-plus": "^2.2.0",
54 |     "eslint": "^8.0.0",
55 |     "eslint-friendly-formatter": "^4.0.1",
56 |     "eslint-plugin-import": "^2.26.0",
57 |     "eslint-plugin-jsx-a11y": "^6.5.1",
58 |     "eslint-plugin-node": "^11.1.0",
59 |     "eslint-plugin-promise": "^6.0.0",
60 |     "eslint-plugin-vue": "9.9.0",
61 |     "eslint-webpack-plugin": "^4.0.0",
62 |     "file-loader": "^6.2.0",
63 |     "html-webpack-plugin": "^5.5.0",
64 |     "sass": "^1.51.0",
65 |     "sass-loader": "13.2.0",
66 |     "style-loader": "^3.3.1",
67 |     "url-loader": "^4.1.1",
68 |     "vue": "^3.2.33",
69 |     "vue-loader": "^17.0.0",
70 |     "vue-router": "^4.0.15",
71 |     "vue-style-loader": "^4.1.3",
72 |     "webpack": "^5.72.1",
73 |     "webpack-cli": "^5.0.0",
74 |     "webpack-dev-server": "^4.9.0"
75 |   },
76 |   "browserslist": [
77 |     "> 1%",
78 |     "last 2 versions",
79 |     "not ie <= 8"
80 |   ],
81 |   "keywords": [
82 |     "vue",
83 |     "element-plus",
84 |     "table",
85 |     "hoc",
86 |     "高阶组件",
87 |     "组件化",
88 |     "表格"
89 |   ]
90 | }
91 | 


--------------------------------------------------------------------------------
/src/components/Table/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="table-list-container">
  3 |     <header
  4 |       v-if="!hideHeader"
  5 |       class="header"
  6 |     >
  7 |       <h2>{{ title }}</h2>
  8 | 
  9 |       <div class="header-actions">
 10 |         <div class="overflow-box">
 11 |           <el-button
 12 |             v-for="(item, index) in getActionList"
 13 |             :key="index"
 14 |             type="primary"
 15 |             v-bind="getHeaderActions(item)"
 16 |             @click="item.action"
 17 |           >
 18 |             {{ item.text }}
 19 |           </el-button>
 20 |         </div>
 21 |       </div>
 22 |     </header>
 23 | 
 24 |     <component :is="containerTag">
 25 |       <div class="filter-form-container">
 26 |         <slot />
 27 |       </div>
 28 | 
 29 |       <el-table
 30 |         ref="hocElTable"
 31 |         v-loading="loading"
 32 |         :data="source"
 33 |         style="width: 100%"
 34 |         v-bind="$attrs"
 35 |         v-on="tableEvents"
 36 |       >
 37 |         <el-table-column
 38 |           v-for="(item, index) in config"
 39 |           :key="index"
 40 |           v-bind="getAttrsValue(item)"
 41 |         >
 42 |           <template #default="scope">
 43 |             <div v-if="isFunction(getValue(scope, item))">
 44 |               <component
 45 |                 :is="renderTypeList[getMatchRenderFunction(item)].target"
 46 |                 :cell-list="getValue(scope, item)()"
 47 |                 :row="scope.row"
 48 |                 :parent="getParent"
 49 |                 @click="($event) => {
 50 |                   handleNativeClick(getAttrsValue(item), $event)
 51 |                 }"
 52 |               />
 53 |             </div>
 54 |             <div
 55 |               v-else
 56 |             >
 57 |               {{ getValue(scope, item) }}
 58 |             </div>
 59 |           </template>
 60 |         </el-table-column>
 61 |       </el-table>
 62 | 
 63 |       <el-row
 64 |         v-if="!hidePagination"
 65 |         class="table-pagination"
 66 |         justify="end"
 67 |         type="flex"
 68 |       >
 69 |         <el-pagination
 70 |           background
 71 |           layout="total, sizes, prev, pager, next, jumper"
 72 |           :current-page="getPagination.currentPage"
 73 |           :page-size="getPagination.pageSize"
 74 |           :total="getPagination.total"
 75 |           @size-change="handleSizeChange"
 76 |           @current-change="handlePageChange"
 77 |         />
 78 |       </el-row>
 79 |     </component>
 80 |   </div>
 81 | </template>
 82 | 
 83 | <script>
 84 | import { isFunction as isFn, isBoolean } from '@/utils/type'
 85 | import ElementsMapping from './ElementsMapping'
 86 | import ComponentsMapping from './ComponentsMapping'
 87 | import { computed, defineComponent, getCurrentInstance, ref } from 'vue'
 88 | export default defineComponent({
 89 |   name: 'Table',
 90 |   components: {
 91 |     ElementsMapping,
 92 |     ComponentsMapping
 93 |   },
 94 |   props: {
 95 |     // 获取表格元数据时携带的参数
 96 |     filterParams: {
 97 |       type: Object,
 98 |       default () {
 99 |         return {}
100 |       }
101 |     },
102 |     // 表格加载 loading
103 |     loading: {
104 |       type: Boolean,
105 |       default: false
106 |     },
107 |     // 表格名称
108 |     title: {
109 |       type: String,
110 |       default: ''
111 |     },
112 |     // 表格元数据
113 |     source: {
114 |       type: Array,
115 |       required: true,
116 |       default () {
117 |         return []
118 |       }
119 |     },
120 |     // 指定外层容器的渲染组件
121 |     containerTag: {
122 |       type: String,
123 |       default: 'el-card'
124 |     },
125 |     // 是否隐藏表头
126 |     hideHeader: {
127 |       type: Boolean,
128 |       default: false
129 |     },
130 |     // 是否隐藏分页
131 |     hidePagination: {
132 |       type: Boolean,
133 |       default: false
134 |     },
135 |     // 分页配置
136 |     pagination: {
137 |       type: Object,
138 |       default () {
139 |         return {}
140 |       }
141 |     },
142 |     // 表格配置文件
143 |     config: {
144 |       type: Array,
145 |       default () {
146 |         return []
147 |       }
148 |     },
149 |     // 表头右上方的按钮组
150 |     actionList: {
151 |       type: Array,
152 |       default () {
153 |         return [
154 |           { text: '', action: () => {} }
155 |         ]
156 |       }
157 |     },
158 |     // element table 原生事件
159 |     tableEvents: {
160 |       type: Object,
161 |       default () {
162 |         return {}
163 |       }
164 |     }
165 |   },
166 | 
167 |   setup (props) {
168 |     const { proxy } = getCurrentInstance()
169 | 
170 |     const getAttrsValue = (item) => {
171 |       const { attrs } = item
172 |       const result = {
173 |         ...attrs
174 |       }
175 |       delete result.prop
176 |       return result
177 |     }
178 | 
179 |     const renderTypeList = ref({
180 |       render: {},
181 |       renderHTML: {
182 |         target: 'elements-mapping'
183 |       },
184 |       renderComponent: {
185 |         target: 'components-mapping'
186 |       }
187 |     })
188 | 
189 |     const getParent = computed(() => {
190 |       return proxy.$parent
191 |     })
192 |     const getPagination = computed(() => {
193 |       const params = {
194 |         currentPage: 1,
195 |         pageSize: 10,
196 |         total: 0
197 |       }
198 |       return Object.assign({}, params, props.pagination)
199 |     })
200 | 
201 |     const getActionList = computed(() => {
202 |       return props.actionList.slice().reverse().filter(it => it.text)
203 |     })
204 | 
205 |     const getValue = (scope, configItem) => {
206 |       const prop = configItem.attrs.prop
207 | 
208 |       const renderName = getMatchRenderFunction(configItem)
209 |       const renderObj = renderTypeList.value[renderName]
210 | 
211 |       if (renderObj && isFunction(configItem[renderName])) {
212 |         return renderObj.target
213 |           ? getRenderValue(scope, configItem, { name: renderName, type: 'bind' })
214 |           : getRenderValue(scope, configItem)
215 |       }
216 | 
217 |       return scope.row[prop]
218 |     }
219 | 
220 |     const getRenderValue = (scope, item, fn = { name: 'render', type: 'call' }) => {
221 |       const prop = item.attrs.prop
222 | 
223 |       const propValue = prop && scope.row[prop]
224 | 
225 |       scope.row.$index = scope.$index
226 | 
227 |       const args = propValue !== undefined ? propValue : scope.row
228 | 
229 |       return item[fn.name][fn.type](getParent.value, args)
230 |     }
231 | 
232 |     // 匹配 render 开头的函数
233 |     const getMatchRenderFunction = (obj) => {
234 |       return Object.keys(obj).find((key) => {
235 |         const matchRender = key.match(/^render.*/)
236 |         return matchRender && matchRender[0]
237 |       })
238 |     }
239 | 
240 |     const isFunction = (fn) => {
241 |       return isFn(fn)
242 |     }
243 | 
244 |     const handlePageChange = (val) => {
245 |       proxy.$emit('getList', Object.assign(props.filterParams, { page: val }))
246 |     }
247 | 
248 |     const handleSizeChange = (val) => {
249 |       proxy.$emit('getList', Object.assign(props.filterParams, { pageSize: val }))
250 |     }
251 | 
252 |     const getHeaderActions = (item) => {
253 |       return {
254 |         ...item.attrs
255 |       }
256 |     }
257 | 
258 |     const stopBubbles = (e) => {
259 |       const event = e || window.event
260 |       if (event && event.stopPropagation) {
261 |         event.stopPropagation()
262 |       } else {
263 |         event.cancelBubble = true
264 |       }
265 |     }
266 | 
267 |     const handleNativeClick = ({ isBubble }, e) => {
268 |       // 考虑到单元格内渲染了组件，并且组件自身可能含有点击事件，故添加了阻止冒泡机制
269 |       // 若指定 isBubble 为 false，则当前单元格恢复冒泡机制
270 |       if (
271 |         isBoolean(isBubble) &&
272 |         !isBubble
273 |       ) return
274 | 
275 |       stopBubbles(e)
276 |     }
277 | 
278 |     return {
279 |       getParent,
280 |       getPagination,
281 |       renderTypeList,
282 |       getActionList,
283 | 
284 |       getAttrsValue,
285 |       getValue,
286 |       getRenderValue,
287 |       getMatchRenderFunction,
288 |       isFunction,
289 |       handlePageChange,
290 |       handleSizeChange,
291 |       getHeaderActions,
292 |       stopBubbles,
293 |       handleNativeClick
294 |     }
295 |   }
296 | })
297 | </script>
298 | 
299 | <style lang="scss" scoped>
300 | .table-list-container {
301 |   .table-pagination {
302 |     padding-top: 20px;
303 |   }
304 |   .header {
305 |     display: flex;
306 |     padding-bottom: 20px;
307 |     .header-actions {
308 |       flex: 1;
309 |       overflow-x: auto;
310 |       .overflow-box {
311 |         display: flex;
312 |         flex-direction: row-reverse;
313 |         overflow-x: auto;
314 |         white-space: nowrap;
315 |         :deep() .el-button:nth-child(1) {
316 |           margin-left: 10px;
317 |         }
318 |       }
319 |     }
320 |   }
321 |   .el-table {
322 |     :deep() th {
323 |       font-size: 14px;
324 |     }
325 |     :deep() td {
326 |       font-size: 14px;
327 |     }
328 |   }
329 | }
330 | </style>
331 | 


--------------------------------------------------------------------------------
/example/src/components/table-list.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="box-container">
  3 |     <Banner />
  4 |     <div class="content">
  5 |       <hoc-el-table
  6 |         ref="singleTable"
  7 |         title="表格Demo"
  8 |         :source="sourceList.data"
  9 |         :pagination="sourceList.pagination"
 10 |         :config="config"
 11 |         :loading="loading"
 12 |         :border="border"
 13 |         :height="tableHeight"
 14 |         highlight-current-row
 15 |         :table-events="{
 16 |           'row-click': handleRowClick
 17 |         }"
 18 |         :action-list="[
 19 |           { text: '固定表头', action: () => setFixedRow() },
 20 |           { text: '固定最右则列', action: () => setFixedRight() },
 21 |           { text: '居中表头label', action: () => setLabelCenter() },
 22 |           { text: '添加边框', action: () => setBorder() },
 23 |           { text: '高亮选中第0行', action: () => setCurrentRow(0) },
 24 |           { text: '高亮选中第1行', action: () => setCurrentRow(1) },
 25 |           { text: '取消选中行', action: () => setCurrentRow() }
 26 |         ]"
 27 |         @get-list="getList"
 28 |       />
 29 |     </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 | /* eslint-disable vue/no-unused-components */
 35 | 
 36 | import { ElMessage, ElMessageBox } from 'element-plus'
 37 | 
 38 | import Banner from './banner.vue'
 39 | import TableChildrenA from './table-children-a'
 40 | import TableChildrenB from './table-children-b'
 41 | 
 42 | // 自行封装的 “复制” 指令
 43 | import { clipboard } from 'example/directive/clipboard'
 44 | import { computed, defineComponent, ref } from 'vue'
 45 | 
 46 | export default defineComponent({
 47 |   components: {
 48 |     Banner,
 49 |     TableChildrenA,
 50 |     TableChildrenB
 51 |   },
 52 |   directives: {
 53 |     clipboard
 54 |   },
 55 |   setup () {
 56 |     const loading = ref(false)
 57 |     const fixedRight = ref('right')
 58 |     const align = ref('center')
 59 |     const tableHeight = ref(null)
 60 |     const border = ref(true)
 61 |     const sourceList = ref({})
 62 | 
 63 |     const singleTable = ref({})
 64 | 
 65 |     const mockData = computed(() => {
 66 |       return {
 67 |         data: [
 68 |           { id: 0, name: '王小虎1', isForbid: false },
 69 |           { id: 1, name: '王小虎2', isForbid: false },
 70 |           { id: 2, name: '王小虎3', isForbid: false },
 71 |           { id: 3, name: '王小虎4', isForbid: false }
 72 |         ],
 73 |         pagination: {
 74 |           total: 3,
 75 |           pageSize: 10,
 76 |           currentPage: 1
 77 |         }
 78 |       }
 79 |     })
 80 | 
 81 |     const config = computed(() => {
 82 |       return [
 83 |         {
 84 |           attrs: {
 85 |             label: '编号',
 86 |             align: align.value,
 87 |             prop: 'id'
 88 |           }
 89 |         },
 90 |         {
 91 |           attrs: {
 92 |             label: '名称',
 93 |             prop: 'name',
 94 |             align: align.value,
 95 |             width: 200
 96 |           }
 97 |         },
 98 |         {
 99 |           attrs: {
100 |             label: '状态',
101 |             prop: 'isForbid',
102 |             align: align.value,
103 |             width: 200
104 |           },
105 |           // 渲染字符串，默认不想展示 prop 的值，而是想对它做一些处理的时候，可以用这个方法
106 |           render (isForbid) {
107 |             return isForbid ? '✖️禁用中' : '✔️非禁用'
108 |           }
109 |         },
110 |         {
111 |           attrs: {
112 |             label: '详情A',
113 |             align: align.value,
114 |             width: 400
115 |           },
116 |           // 渲染组件，返回值为一个数组， data 作为组件的 v-model，适用于需要展示复杂的数据的场景
117 |           renderComponent (row) {
118 |             return [
119 |               { name: 'TableChildrenA', data: row },
120 |               { name: 'el-input', data: row.name },
121 |               { name: 'el-rate', data: row.id }
122 |             ]
123 |           }
124 |         },
125 |         {
126 |           attrs: {
127 |             label: '详情B',
128 |             align: align.value,
129 |             width: 400
130 |           },
131 |           renderComponent (row) {
132 |             return [
133 |               { name: 'TableChildrenB', data: row }
134 |             ]
135 |           }
136 |         },
137 |         {
138 |           attrs: {
139 |             label: '操作',
140 |             width: '300',
141 |             align: align.value,
142 |             // 设置当前列恢复点击事件冒泡
143 |             // isBubble: false,
144 |             fixed: fixedRight.value
145 |           },
146 |           // 渲染 el-button，一般用在最后一列。目前只支持 el-button 和 click 事件，后续会根据需求支持任意的 el-xxx 和事件委托
147 |           renderHTML (row) {
148 |             return [
149 |               {
150 |                 attrs: {
151 |                   label: '查看',
152 |                   type: 'primary',
153 |                   text: true,
154 |                   bg: true
155 |                 },
156 |                 el: 'button',
157 |                 click () {
158 |                   ElMessage({
159 |                     message: JSON.stringify(row)
160 |                   })
161 |                 }
162 |               },
163 |               {
164 |                 attrs: {
165 |                   label: '编辑',
166 |                   type: 'primary',
167 |                   text: true,
168 |                   bg: true
169 |                 },
170 |                 el: 'button',
171 |                 click () {
172 |                   ElMessage({
173 |                     message: `编号${row.id} router -> 已跳转到编辑页面！`
174 |                   })
175 |                 }
176 |               },
177 |               {
178 |                 attrs: {
179 |                   label: '发布',
180 |                   type: 'primary',
181 |                   text: true,
182 |                   bg: true
183 |                 },
184 |                 el: 'button',
185 |                 click () {
186 |                   setPublish(row)
187 |                 }
188 |               },
189 |               !row.isForbid
190 |                 ? {
191 |                   attrs: {
192 |                     label: '禁用',
193 |                     type: 'primary',
194 |                     text: true,
195 |                     bg: true,
196 |                     disabled: false
197 |                   },
198 |                   el: 'button',
199 |                   click () {
200 |                     setForbid(row)
201 |                   }
202 |                 }
203 |                 : {
204 |                   attrs: {
205 |                     label: '解除禁用',
206 |                     text: true,
207 |                     bg: true,
208 |                     type: 'primary',
209 |                     disabled: false,
210 |                     style: {
211 |                       color: '#e6a23c'
212 |                     }
213 |                   },
214 |                   el: 'button',
215 |                   click () {
216 |                     setForbid(row)
217 |                   }
218 |                 },
219 |               {
220 |                 el: 'el-divider'
221 |               },
222 |               {
223 |                 attrs: {
224 |                   label: '指令测试-复制链接',
225 |                   type: 'primary',
226 |                   // 为简便起见，这里引入了 clipboard 库，请注意
227 |                   directives: [
228 |                     {
229 |                       name: 'clipboard',
230 |                       value: JSON.stringify(row),
231 |                       arg: 'copy'
232 |                     }
233 |                   ]
234 |                 },
235 |                 el: 'button',
236 |                 click () {
237 |                   copyLink(row)
238 |                 }
239 |               }
240 |             ]
241 |           }
242 |         }
243 |       ]
244 |     })
245 | 
246 |     const sleep = (time = 1000) => {
247 |       return new Promise((resolve) => setTimeout(resolve, time))
248 |     }
249 | 
250 |     const getList = async () => {
251 |       loading.value = true
252 | 
253 |       await sleep()
254 | 
255 |       sourceList.value = mockData.value
256 |       loading.value = false
257 |     }
258 | 
259 |     const setFixedRight = () => {
260 |       if (!fixedRight.value) {
261 |         fixedRight.value = 'right'
262 |       } else {
263 |         fixedRight.value = false
264 |       }
265 |     }
266 | 
267 |     const setFixedRow = () => {
268 |       if (!tableHeight.value) {
269 |         tableHeight.value = '350'
270 |       } else {
271 |         tableHeight.value = ''
272 |       }
273 |     }
274 | 
275 |     const setLabelCenter = () => {
276 |       if (!align.value) {
277 |         align.value = 'center'
278 |       } else {
279 |         align.value = ''
280 |       }
281 |     }
282 | 
283 |     const setBorder = () => {
284 |       border.value = !border.value
285 |     }
286 | 
287 |     const handleRowClick = (row, column, cell) => {
288 |       ElMessage({
289 |         dangerouslyUseHTMLString: true, // Be careful :)
290 |         message: `row-click 事件，单击了<span style="color: red;"> 第${row.$index}行 </span>请看控制台 log`
291 |       })
292 |       console.log('回调参数分别为: row, column, cell')
293 |       console.log(row, column, cell)
294 |     }
295 | 
296 |     const setCurrentRow = (rowNumber) => {
297 |       const hocElTable = singleTable.value.$refs.hocElTable
298 |       const row = rowNumber !== undefined ? sourceList.value.data[rowNumber] : ''
299 |       hocElTable.setCurrentRow(row)
300 |     }
301 | 
302 |     const setPublish = (row) => {
303 |       ElMessageBox.confirm(`此操作会将${row.name}发布到线上, 是否继续?`, `编号${row.id}提示`, {
304 |         confirmButtonText: '确定',
305 |         cancelButtonText: '取消',
306 |         type: 'warning'
307 |       }).then(() => {
308 |         ElMessage({
309 |           type: 'success',
310 |           message: '发布成功!'
311 |         })
312 |       }).catch(() => {
313 |         ElMessage({
314 |           type: 'info',
315 |           message: '已取消发布'
316 |         })
317 |       })
318 |     }
319 | 
320 |     const setForbid = async (row) => {
321 |       loading.value = true
322 |       await sleep()
323 |       loading.value = false
324 |       row.isForbid = !row.isForbid
325 |     }
326 | 
327 |     const copyLink = (row) => {
328 |       ElMessage({
329 |         type: 'success',
330 |         message: '指令测试-复制成功，可以粘贴啦!'
331 |       })
332 |     }
333 | 
334 |     getList()
335 | 
336 |     return {
337 |       singleTable,
338 | 
339 |       loading,
340 |       fixedRight,
341 |       align,
342 |       tableHeight,
343 |       border,
344 |       sourceList,
345 |       mockData,
346 |       config,
347 | 
348 |       sleep,
349 |       setFixedRight,
350 |       setFixedRow,
351 |       setLabelCenter,
352 |       setBorder,
353 |       handleRowClick,
354 |       setCurrentRow,
355 |       setPublish,
356 |       setForbid,
357 |       copyLink,
358 | 
359 |       getList
360 |     }
361 |   }
362 | })
363 | </script>
364 | 
365 | <style lang="scss" scoped>
366 | .box-container {
367 |   .content {
368 |     position: relative;
369 |     padding: 20px 20px 0;
370 |     margin: 0 auto;
371 |   }
372 | }
373 | </style>
374 | 


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