zr-edit-table v0.2.4

zr-edit-table

说明

表格组件，带有编辑功能和合并列/行功能，基于elementUi 的 table封装。

快速上手

先 npm 下载插件

`npm install zr-edit-table --save`
或
`npm i zr-edit-table -S`

import zrEditTable from 'zr-edit-table'
import 'zr-edit-table/lib/zr-edit-table.css'
Vue.use(zrEditTable)

例子

参数

  //列数据
  { label: "姓名",//标题
    prop: "name",//列的字段名，对应data的字段名
    width: "180",//固定宽度
    mWidth:"180",//最小宽度
    edit: "text|请输入内容",//编辑类型|编辑框提示说明，
    //""：不编辑，
    //"text":文本框
    //checkbox:多选框
    //select:下拉框
    //number:数字框
    //date:日期框
    //color:选择颜色框
    min: 1,//编辑类型为number时候，该属性为number框最小值
    max: 100,//编辑类型为number时候，该属性为number框最大值
    format: "yyyy 年 MM 月 dd 日",//当编辑类型为date时候，定义日期格式
    "value-format": "yyyy-MM-dd",//当编辑类型为date时候，定义日期格式
    data: { "1": "是", "2": "否" },//特殊类型的编辑需要用到的数据
    //checkbox:{ key1(选中的值): "是"(描述), key2(没选中的值): "否"(描述) }
    //select:[{ label: "男"(ui显示的值), value: 1(数据获取的值) }]
    headCheckBox: {//当有该属性时候，表头带有checkbox
      checked: false,//是否选中
      disabled: false,//是否屏蔽
      change: (value, scope) => {//回调事件
        console.log(value, scope);
      }
    }
  }