lc-edit-table

lc-edit-table 自定义表格

介绍

组件开发模板

基于element-ui二次封装table实现自定义编辑表格

支持自定义组件 input select datePicker cascader

快速开始

安装组件库

npm install lc-edit-table

引用组件库

import lcEditTable from 'lc-edit-table'
Vue.use(lcEditTable)

使用说明

1. 页面标签

<lcEditTable :tableData="tableData" :cols="cols" :that="that" :inputTypeObject="inputTypeObject" :height="tableHeight" @tableChange="tableChange" />

2. 属性介绍

tableData: 表格数据 数组 当前数据添加noEdit: true，则表示当前行双击都不可编辑，比isEdit权重高

tableData: 表格数据 数组 当前数据添加noEdit: true，则表示当前行双击都不可编辑，比isEdit权重高

示例:

tableData: [
   { name: '姓名', bgzd: "name", bgq: 12, bgh: 14, id: 123 },
   { name: '年龄', bgzd: "age", bgq: 2, bgh: 1, id: 11 },
   { name: '设置', bgzd: "ss", bgq: 13, bgh: 15, id: 132 },
   { name: '测试1', bgzd: "ss", bgq: 13, bgh: 15, id: 12 },
   { name: '测试2', bgzd: "cs2", bgq: "2022-10-06 15:33:26", bgh: "2022-12-08", id: 13 },
   { name: '测试3', bgzd: "ss1", bgq: 660200, bgh: 660100, id: 14 },
]

cols: 表头数据及字段绑定 数组

cols 示例如下：

cols: [
  { label: '变更内容名称', prop: 'name', isEdit: false, },
  { label: '变更字段', prop: 'bgzd', isEdit: false, },
  { label: '变更前', prop: 'bgq', isEdit: false, isFormat: true },
  { label: '变更后', prop: 'bgh', isEdit: true, isFormat: true },
]

cols:数组对象属性{

label: 表头名称,

prop: 绑定字段,

isEdit: 当前列是否存在可修改单元格,

isFormat: 当前列是否存在格式化单元格,

}

inputTypeObject: 对指定表格行数据配置 数组

示例：

inputTypeObject: [
  { inputType: "input", key: "name", placeholder: "", disabled: false, clearable: false },
  { inputType: "select", key: "age", placeholder: "", disabled: false, clearable: false, filterable: false, options: "ageOptions", formatter: this.ageFormat },
  { inputType: "datePicker", key: "cs2", placeholder: "", disabled: false, clearable: false, formatter: this.dateFormat },
  { inputType: "cascader", key: "ss1", placeholder: "所属兵团辖区", props: "defaultParams", options: "ssqhoptions", disabled: false, clearable: false, formatter: this.ssqhFormat },
],

inputTypeObject:数组对象属性{

inputType: 输入组件类型,

key: 绑定字段,

formatter: 当前行定义可格式化列的数据格式化

}

height: 最大高度，默认为800

that: 当前调用组件页面this指向

5. 方法 methods

/** tableChange: 表格修改后的数据获取，并赋值 */
// 变更表格内容处理
tableChange (scope, tableData) {
  // 当前修改数据：scope.row[scope.column.property]
  console.log("testView-scope", scope);
  console.log("testView-tableData", tableData);
}