基于vue的可编辑表格插件

mone-editable

基于 vue 的可编辑表格插件

特性 可编辑的单元格包括 KCheckBox 单选框，类似于 input type="radio" KNumber 数字框，类似于 input type="number" KSelect 下拉框，类似于 select KQuery 搜索框，自定义表单类型，常用于异步关联查询 KText 文本框，类似于 input type="text" 数据驱动

根据规则可以快速配置出一个简易的Excel。

简约的样式风格 使用 安装组件

npm i mone-editable -S 引入和使用

index.js

import Vue from 'vue'; import App from './App'; // 全局引入 import 'mone-editable/dist/mone-editable.css'; import me from 'mone-editable'; Vue.use(me); /* eslint-disable no-new */ new Vue({ el: '#app', render: h => h(App) });

App.vue

<template> <div class="app"> <h3 class="text-center">mone-editable</h3> <!-- 可编辑表格 --> <k-editable :config="config" :data-list="rows" @add-row="addNewRow" @del-row="delRow"></k-editable> </div> </template> ...

通过config参数配置整个 editable 的主结构， 通过data-list参数展示列表数据，数据的编辑改动直接影响到该引用参数

目录 assets 文档以及项目相关资源 example 示例程序开发目录 lib 压缩打包后的正式文件 src 插件源码 开发

# 安装依赖 npm install # 查看项目 http://localhost:8080 npm run dev

开发时会启动example目录的示例程序

构建

# 构建正式文件到 lib 目录 npm run build # 查看webpack构建分析 npm run build --report 贡献人员

jczzq