d2-crud-x

在原d2-crud基础上做出如下改进

1.支持隐藏表格，自定义列表展示方式

配置options.hide=true

  <template slot="body">自定义列表</template>

2.支持字段组件通过插槽自定义【slot】

• crud配置

export const crudOptions = {
  columns: [
    {
      title: '插槽示例',
      key: 'slotExample',
      sortable: true,
      search: {
        disabled: false,
         /**
          *启用search的插槽，在下写自定义slot即可
          *插槽name为key+SearchSlot
          *scope.form为当前表单form
          <template slot="[item.key]SearchSlot">
            {{scope.form['key']}}
          </template>
          */
        slot: true 
      },
      form: {
          /**
            *启用编辑对话框的插槽，在下写自定义slot即可
            *插槽name为key+FormSlot
            *scope.form为当前表单form
            <template slot="[item.key]FormSlot">
            {{scope.form['key']}}
            </template>
            */
        slot: true
      },
      /**
      *启用行内插槽，在下写自定义slot即可
      *插槽name为key+Slot
      *scope.row为当前行
      <template slot="[item.key]Slot">
      {{scope.row['key']}}
      </template>
      */
      rowSlot: true 
      
    }
  ]
}

• ####template

<template>
  
    
      <template slot="slotExampleSearchSlot">
        
      </template>
    
    
      <template slot="slotExampleSlot">
        {{scope.row['slotExample']}}
      </template>
      <template slot="slotExampleFormSlot">
        
      </template>
    
  
</template>

3.自定义组件支持formDataChange事件

1. 能够在某个字段change后修改form表单的其他值
2. 修复formDataChange获取的值是旧值的bug

介绍

D2-Crud是一套基于Vue.js 2.2.0+和Element UI 2.0.0+的表格组件。D2-Crud 将 Element 的功能进行了封装，并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 json 实现，在实现并扩展了 Element 表格组件功能的同时，降低了开发难度，减少了代码量，大大简化了开发流程。

文档和示例

文档：
示例：

功能

• 继承了 Element 中表格所有功能
• 新增表格数据
• 修改表格数据
• 删除表格数据
• 使用 Element 中的组件渲染表格内容和表单内容
• 表单校验
• 表格内编辑
• 渲染自定义组件