├── example ├── style │ └── _variables.less ├── assets │ ├── logo.png │ └── qrcode.png ├── main.js ├── App.vue ├── views │ ├── demo │ │ ├── base.vue │ │ ├── pagination.vue │ │ ├── column-slot.vue │ │ ├── button-slot.vue │ │ ├── row-edit.vue │ │ └── button.vue │ └── index.vue └── router │ └── index.js ├── .browserslistrc ├── .yarnrc ├── .gitattributes ├── public ├── favicon.ico └── index.html ├── lib ├── vue-elementui-table.umd.js.gz ├── vue-elementui-table.common.js.gz ├── vue-elementui-table.umd.min.js.gz ├── demo.html ├── vue-elementui-table.css └── vue-elementui-table.umd.min.js ├── .editorconfig ├── .eslintignore ├── postcss.config.js ├── .stylelintignore ├── .gitignore ├── src ├── main.js └── components │ ├── index.js │ └── zj-table │ ├── fields │ └── select.js │ ├── readme.md │ ├── index.scss │ └── index.js ├── commitlint.config.js ├── babel.config.js ├── docs └── 将移动端适配调整为使用rem.md ├── vue.config.js ├── commitlint.md ├── .stylelintrc.js ├── package.json ├── .eslintrc.js └── README.md /example/style/_variables.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | registry= https://registry.npm.taobao.org/ 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js eol=lf 2 | *.json eol=lf 3 | *.jsx eol=lf 4 | *.ts eol=lf 5 | *.vue eol=lf 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /example/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/example/assets/logo.png -------------------------------------------------------------------------------- /example/assets/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/example/assets/qrcode.png -------------------------------------------------------------------------------- /lib/vue-elementui-table.umd.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/lib/vue-elementui-table.umd.js.gz -------------------------------------------------------------------------------- /lib/vue-elementui-table.common.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/lib/vue-elementui-table.common.js.gz -------------------------------------------------------------------------------- /lib/vue-elementui-table.umd.min.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snowzijun/vue-element-table/HEAD/lib/vue-elementui-table.umd.min.js.gz -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | max_line_length = 120 10 | tab_width = 4 11 | trim_trailing_whitespace = true 12 | -------------------------------------------------------------------------------- /lib/demo.html: -------------------------------------------------------------------------------- 1 | 2 | vue-elementui-table demo 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /lib 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-06-15 13:57:40 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-07-21 13:26:12 6 | * @Description: postcss 配置 样式适配 7 | * @FilePath: \vue-element-table\postcss.config.js 8 | */ 9 | 10 | module.exports = { 11 | plugins: { 12 | autoprefixer: {} 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /lib 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /.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 | pnpm-debug.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-07-21 12:29:49 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-07-27 18:58:07 6 | * @Description: 文件说明 7 | * @FilePath: \vue-element-table\src\main.js 8 | */ 9 | import ZjTable from './components/zj-table' 10 | 11 | export default { 12 | install(Vue) { 13 | Vue.component(ZjTable.name, ZjTable) 14 | }, 15 | ZjTable 16 | } 17 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-06-16 11:23:20 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-07-21 12:43:59 6 | * @Description: 文件说明 7 | * @FilePath: \vue-element-table\src\components\index.js 8 | */ 9 | 10 | // 扫描所有的组件 11 | const files = require.context('./', true, /^\.\/[\w-_]+\/index\.(js|vue)$/) 12 | 13 | const components = files.keys().map(key => { 14 | return files(key).default 15 | }) 16 | 17 | export default { 18 | install(Vue) { 19 | components.forEach(component => { 20 | Vue.component(component.name, component) 21 | }) 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-07-21 12:32:52 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-07-21 13:27:43 6 | * @Description: 文件说明 7 | * @FilePath: \vue-element-table\example\main.js 8 | */ 9 | 10 | import Element from 'element-ui' 11 | import 'element-ui/lib/theme-chalk/index.css' 12 | import Vue from 'vue' 13 | import ZjUi from '../src/main' 14 | import App from './App.vue' 15 | import router from './router' 16 | Vue.config.productionTip = false 17 | Vue.use(Element) 18 | 19 | Vue.use(ZjUi) 20 | 21 | new Vue({ 22 | router, 23 | render: h => h(App) 24 | }).$mount('#app') 25 | -------------------------------------------------------------------------------- /example/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 14 | 17 | 18 | 34 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ['@commitlint/config-conventional'], 3 | rules: { 4 | 'type-enum': [ 5 | 2, 6 | 'always', 7 | [ 8 | // 新功能（feature） 9 | 'feat', 10 | // 修补bug 11 | 'fix', 12 | // 文档（documentation） 13 | 'docs', 14 | // 格式（不影响代码运行的变动） 15 | 'style', 16 | // 重构（即不是新增功能，也不是修改bug的代码变动） 17 | 'refactor', 18 | // 增加测试 19 | 'test', 20 | // 回滚 21 | 'revert', 22 | // 构建过程或辅助工具的变动 23 | 'config', 24 | // 其他改动 25 | 'chore' 26 | ] 27 | ], 28 | 'subject-full-stop': [0, 'never'], 29 | 'subject-case': [0, 'never'] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-07-08 16:12:32 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-07-14 13:50:58 6 | * @Description: 文件说明 7 | * @FilePath: \vue-base\babel.config.js 8 | */ 9 | 10 | const prodPlugin = [] 11 | // 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn 12 | if (process.env.NODE_ENV === 'production') { 13 | prodPlugin.push([ 14 | 'transform-remove-console', 15 | { 16 | exclude: ['error', 'warn'] 17 | } 18 | ]) 19 | } 20 | 21 | module.exports = { 22 | presets: ['@vue/cli-plugin-babel/preset'], 23 | plugins: [ 24 | // 让系统支持可选链 25 | '@babel/plugin-proposal-optional-chaining', 26 | // 配置 vant 按需加载 27 | [ 28 | 'import', 29 | { 30 | libraryName: 'vant', 31 | libraryDirectory: 'es', 32 | style: true 33 | }, 34 | 'vant' 35 | ], 36 | ...prodPlugin 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /docs/将移动端适配调整为使用rem.md: -------------------------------------------------------------------------------- 1 | 当前框架使用了插件`postcss-px-to-viewport`在项目构建的时候，将`px`转换为`vw`,来满足移动端适配需求 2 | 有些同学可能想将`vw`替换为`rem`，那应该怎么做呢? 3 | 4 | ### 修改插件 5 | 首先卸载原来的插件`postcss-px-to-viewport` 6 | ```shell 7 | yarn remove postcss-px-to-viewport -D 8 | ``` 9 | 10 | ### 安装`px`转`rem`的插件 11 | ```shell 12 | yarn add postcss-pxtorem -D 13 | yarn add amfe-flexible -S 14 | ``` 15 | 16 | ### 修改`postcss.config.js` 17 | 18 | ``` javascript 19 | module.exports = { 20 | plugins: { 21 | autoprefixer: {}, 22 | 'postcss-pxtorem': { 23 | // 一般根据设计稿的 1/10来取值， 因为使用的是vant框架，推荐使用37.5，许多公司设计稿是750的，可以设置为75 24 | rootValue: 37.5, 25 | // 需要被转换的属性 26 | propList: ['*'], 27 | // 不进行px转换的选择器 28 | selectorBlackList: [] 29 | } 30 | } 31 | } 32 | ``` 33 | 34 | ### 修改`main.js` 35 | 在`main.js`中引入`amfe-flexible`计算根元素的字体大小 36 | 37 | ```javascript 38 | // rem h5 适配 39 | import 'amfe-flexible/index.js' 40 | ``` 41 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | <%= htmlWebpackPlugin.options.title %> 17 | 18 | 19 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/views/demo/base.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 45 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-07-12 12:26:05 4 | * @LastEditTime: 2020-07-27 09:44:24 5 | * @LastEditors: 子君 6 | * @Description: In User Settings Edit 7 | * @FilePath: \vue-element-table\vue.config.js 8 | */ 9 | // const path = require('path') 10 | // const resolve = dir => path.resolve(__dirname, '../', dir) 11 | 12 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 13 | const isProd = process.env.NODE_ENV === 'production' 14 | 15 | module.exports = { 16 | configureWebpack: config => { 17 | if (isProd) { 18 | // 配置webpack 压缩 19 | config.plugins.push( 20 | new CompressionWebpackPlugin({ 21 | test: /\.js$|\.html$|\.css$/, 22 | // 超过4kb压缩 23 | threshold: 4096 24 | }) 25 | ) 26 | } 27 | }, 28 | chainWebpack: config => { 29 | if (process.env.NODE_ENV === 'production') { 30 | config.externals({ 31 | 'element-ui': 'element-ui', 32 | 'async-validator': 'async-validator', 33 | lodash: 'lodash' 34 | }) 35 | } else { 36 | // 项目标题 37 | config.plugin('html').tap(args => { 38 | args[0].title = '前端有的玩' 39 | return args 40 | }) 41 | config 42 | .entry('app') 43 | .clear() 44 | .add('./example/main.js') 45 | } 46 | }, 47 | // 不需要生产环境的 source map 48 | productionSourceMap: false, 49 | publicPath: !isProd ? '/' : '', 50 | css: { 51 | // 是否将css 提取到独立的文件,生产环境提取，开发环境不提取 52 | extract: !!isProd, 53 | // 开发模式开启css sourcemap 54 | sourceMap: !isProd 55 | }, 56 | devServer: { 57 | port: 12315 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /example/router/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: 子君 3 | * @Date: 2020-06-15 10:34:38 4 | * @LastEditors: 子君 5 | * @LastEditTime: 2020-08-06 12:36:47 6 | * @Description: 文件说明 7 | * @FilePath: \vue-element-table\example\router\index.js 8 | */ 9 | 10 | import Vue from 'vue' 11 | import VueRouter from 'vue-router' 12 | // 为了首屏加载快，所以首页不使用懒加载 13 | import Home from '../views/index' 14 | 15 | Vue.use(VueRouter) 16 | 17 | const router = new VueRouter({ 18 | routes: [ 19 | { 20 | path: '/', 21 | redirect: '/demo/base' 22 | }, 23 | { 24 | path: '/demo', 25 | name: 'Home', 26 | component: Home, 27 | children: [ 28 | { 29 | path: 'base', 30 | component: () => import('../views/demo/base') 31 | }, 32 | { 33 | path: 'pagination', 34 | component: () => import('../views/demo/pagination') 35 | }, 36 | { 37 | path: 'button', 38 | component: () => import('../views/demo/button') 39 | }, 40 | { 41 | path: 'row-edit', 42 | component: () => import('../views/demo/row-edit') 43 | }, 44 | { 45 | path: 'slot-button', 46 | component: () => import('../views/demo/button-slot') 47 | }, 48 | { 49 | path: 'column-slot', 50 | component: () => import('../views/demo/column-slot') 51 | } 52 | ] 53 | } 54 | ], 55 | // 页面滚动行为 56 | scrollBehavior(/* to, from, savedPosition */) { 57 | return { 58 | x: 0, 59 | y: 0 60 | } 61 | } 62 | }) 63 | 64 | router.beforeEach((to, from, next) => { 65 | next() 66 | }) 67 | 68 | export default router 69 | -------------------------------------------------------------------------------- /commitlint.md: -------------------------------------------------------------------------------- 1 | #### Commit Message 标准格式 2 | 3 | AngularJS的Commit规范 4 | 5 | ```xml 6 | (): 7 | <空行> 8 | 9 | <空行> 10 |