2 |
3 |
validate-table-demo1
4 |
5 | 校验触发
6 |
7 |
8 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const { VueLoaderPlugin } = require('vue-loader')
4 | const HtmlWebpackPlugin = require('html-webpack-plugin')
5 | const env = process.env.NODE_ENV
6 | const isPrd = env === 'production'
7 |
8 | const devPlugins = [
9 | new webpack.HotModuleReplacementPlugin(),
10 | new HtmlWebpackPlugin({
11 | template: './index.html',
12 | inject: 'body',
13 | minify: {
14 | removeComments: true
15 | }
16 | })
17 | ]
18 |
19 |
20 | module.exports = {
21 | //输入
22 | mode: env,
23 | entry: {
24 | path: !isPrd ? path.join(__dirname, './examples/main.js') : path.join(__dirname, './packages/index.js'),
25 | },
26 | //输出
27 | output: {
28 | path: path.resolve(__dirname, isPrd ? './lib' : './dist'),
29 | filename: isPrd ? 'el-validate-table.js' : 'bundle.js',
30 | library: '[name].js',
31 | libraryTarget: 'umd',
32 | umdNamedDefine: true
33 | },
34 | module: {
35 | rules: [
36 | {
37 | test: /\.js$/,
38 | loader: 'babel-loader',
39 | include: [
40 | path.resolve(__dirname, 'src'),
41 | path.resolve(__dirname, 'node_modules/element-ui/src')
42 | ],
43 | exclude: /node_modules/
44 | },
45 | {
46 | test: /\.vue$/,
47 | use: 'vue-loader',
48 | },
49 | {
50 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
51 | loader: 'file-loader'
52 | },
53 | {
54 | test: /\.css$/,
55 | use: ['vue-style-loader', 'style-loader', 'css-loader']
56 | }
57 | ]
58 | },
59 | // optimization:{
60 | // minimizer:isPrd,
61 | // },
62 | plugins: [new VueLoaderPlugin()].concat(isPrd ? [] : devPlugins),
63 | devServer: {
64 | port: 3000,
65 | host: '127.0.0.1',
66 | open: true,
67 | hot: true,
68 | overlay: { erros: true }
69 | }
70 | }
71 |
72 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # el-validate-table
2 |
3 | 基于 element-ui 封装的可编辑，可校验，可合并的表格
4 |
5 | 
6 |
7 | ```sh
8 | yarn add el-validate-table or npm i el-validate-table
9 | ```
10 |
11 | ## 目录
12 |
13 | * [介绍](#介绍)
14 | * [特点](#特点)
15 | * [示例](#示例)
16 | * [参数说明](#参数说明)
17 |
18 |
19 | ## 介绍
20 |
21 | **概要**
22 |
23 | `el-validate-table` 是基于[element-ui](https://github.com/ElemeFE/element)封装的**表格组件**,采用 vue 中的 render 函数写法，支持高度的可扩展性，可复用性，通过 JSON 配置即可实现，表格中的单元格编辑校验，多级表头，单元格合并。
24 |
25 | **背景**
26 |
27 | 基于 2019-4 月初某项目背景，项目中含有大量的多级表头，单元格编辑。项目初期，tempalte 中存在大量的结构代码，难以迭代，难以维护，基于此背景，为了节省时间，减少重复冗余的代码，让开发者专注业务逻辑。
28 |
29 |
30 |
31 | [⬆ Back to Top](#目录)
32 |
33 | ## 特点
34 |
35 | * 只需进行简单的配置，即可实现单元格编辑（可校验）,多级表头，单元格合并等复杂功能
36 | * 支持 _ElTable_, _ElTableColumn_ 的所有的API
37 | * 支持单元格自定义校验
38 | * 单元格支持自定义组件渲染
39 | * 体验良好的校验交互
40 |
41 | [⬆ Back to Top](#目录)
42 |
43 | ## 示例
44 |
45 | 1.基本用法
46 |
47 | ```vue
48 |