my-crud

介绍

my-crud 是基于D2-Crud修改的vue 表格组件，包含简单的增删查改表单，比原版添加部分功能。

功能

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

安装

使用npm

npm i element-ui my-element-crud -S

在项目中使用

在main.js中写入以下内容：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import D2Crud from 'my-element-crud'

Vue.use(ElementUI)
Vue.use(D2Crud)

new Vue({
  el: '#app',
  render: h => h(App)
})

之后就可以在项目中使用 D2-Crud 了。

CDN

externals: D2Crud

https://cdn.d2.pub/packages/@d2-projects/[email protected]/d2-crud.js

补丁修改

2020/10/12

• 增加自定义按钮，更多下拉选择

        custom: [
          {
            text: '更多',
            type: 'text',
            // size: 'small',
            sort: 8,
            emit: 'custom-edit',
            show: (index, row) => true,
            more: [
              {
                text: '!!!!!',
                emit: 'custom-pop',
                show: (index, row) => true
              }
            ]
          }
        ]

• 增加 addtemplate \ edittemplate 中事件和属性绑定至element组件功能
• @ 前缀为组件事件
• : 前缀为组件属性

mycom2: {
            title: "自带选择框",
            value: "",
            _sort: 4,
            component: {
              name: "el-select",
              options: [
                { label: "测试1", value: 1 },
                { label: "测试2", value: 2 },
              ],
              // 事件绑定
              '@change': (e) => {
                console.log(this.rowHandle);
              },
              // 属性绑定
              ':size':'mini'
            },
          },

• 解决自带选择框 form-data-change 事件无法正确传递到父组件的问题

• 增加自定义查看按钮

• 增加查看功能，查看时元素默认disabled

• 自定义组件disabled 需要在props中增加 disabled: Boolean 组件属性写： :disabled="disabled"

• 使用：

<d2-crud v-bind:look-template="addTemplate"></d2-crud>
rowHandle: {
  look: {
    text: "查看",
    emit: "lookHandle"
  },
}

• 增加自定义按钮排序功能

• 使用：

rowHandle: {
  minWidth: "180px",
  look: {
    text: "查看",
    emit: "lookHandle",
    sort: 3
  },
  customs: [{
      text: '打卡记录',
      emit: 'showRecord',
      sort:2
    }],
  edit: {
    text: "编辑",
    emit: "editHandle",
    type: "warning ",
    sort: 1
  },

  }

• 增加纯文字查看
• 使用：

rowHandle: {
  lookNoEle: {
    text: "查看",
    emit: "lookHandle"
  },
}

• 自定义查看formatter
• 使用：

 mycom: {
    title: "选择框",
    value: "",
    component: {
      name: testCom,
      formatter(val) {
        return val === 1 ? "测试1" : "测试2";
      },
      props: {
        options: [
          { label: "测试1", value: 1 },
          { label: "测试2", value: 2 }
        ]
      }
    }
  },

• 自定义查看可自定义class
• 使用：

 roleName: {
    title: "角色名",
    value: "",
    class: "my_label",
    component: {
      placeholder: " 仅可输入英文大小写、数字"
    }
  },

-- 增加动态显示隐藏form表单

• 使用： addTemplate值需要放在计算属性中 根据需要设置show的值 表单打开时如果是修改和查看也需要设置show值

 roleName: {
    title: "角色名",
    value: "",
    class: "my_label",
    component: {
      show: this.show === 1
      placeholder: " 仅可输入英文大小写、数字"
    }
  },

设置表单dialog的宽度 :add-width="400px" :edit-width="400px"

=======

• 添加表单中自定义组件互相调用
• 自定义组件中使用$emit('componentEvent')，向父组件发送事件，父组件使用 @componentEvent:#{自定义组件key}="handle" 接收
• 父组件使用 $refs.d2Crud.getRef("#{自定义组件key}").handleComponentEvent(data) 派发函数 -使用：

父组件

<d2-crud
@componentEvent:coma="handle">
</d2-crud>

computed:{
  addTemplate(){
    return {
      coma: {

            title: "自定义选择框a",
            value: "",
            component: {
              name: coma,

              },
    },
    comb: {
            title: "自定义选择框b",
            value: "",
            component: {
              name: comb,
        },
      },
    }
  },
  method:{
  handle(data) {
      this.$refs.d2Crud.getRef("comb").handleComponentEvent(data);
    }}

组件A

<template>
  <div>
    <el-button @click="up">up123</el-button>
  </div>
</template>

      up() {
        this.$emit("componentEvent", 123);
      }

组件B

  methods:{
    handleComponentEvent(data){
      this.data=data
    }
  }