基于iview的可编辑表格

基于iview4.0开发的可编辑表格组件

version: 0.0.1

Author: LilyXu

可编辑表格支持input、select、switch、date（时间选择器）、cascader（级联选择器） type: 'input'

input、select支持表单校验

npm install edit-form-table --save or yarn add edit-form-table

在 main.js中引用

// 项目中如果没有引用iview，还需import import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; Vue.use(ViewUI); import EditFormTable from 'edit-form-table' import 'edit-form-table/lib/editTable.css' Vue.use(EditFormTable)

在代码中使用

<edit-form-table :columns="columns" :loading="loading" :data="data" @saveEditTable="saveEditTable" @deleteEditTable="deleteList" /> Props

columns的数据格式如下

{ title: "姓名", // 表头文字 slot: "name", // 表格每行的key type: 'input', // 编辑时的编辑内容 placeholder: '', // 输入框的提示信息、type为input、select支持placeholder clearable: true, // 是否可被删除，type为input、select支持clearable disabled: true, // 是否可被禁用，type为input、select支持disabled validate: [ // 校验信息，type为input、select支持validate { required: true, message: '姓名不能为空', trigger: 'blur' } ] }, { title: "性别", slot: "sex", type: 'select', placeholder: '', // multiple: true, // disabled: true, // clearable: true, validate: [ { required: true, message: '性别不能为空', trigger: 'blur' } ], item: [ {label: '男', value: "men"}, {label: '女', value: "women"} ] },

data: [] 填充表格的数据

key 和 columns 中的 slot 保持一致

{ name: "王小明", age: '18', sex: 'men', alive: true, birthday: "919526400000", address: "北京市朝阳区芍药居" },

title 可编辑表格的标题

addText 添加按钮的文字信息

height 表格的高度

stripe 是否显示间隔斑马纹

loading loading状态