D2Admin自制数据的增删改查

前言
想在D2Admin中进行数据的增删改查，可以直接使用它本身的，但是如果想做增加和修改中调用其他数据库里的内容，那就要重新自己来写相应的按钮和按钮效果。
内容
template

  <el-button slot="headerButton"   style="{padding:10px 10px ;fixed:right}" type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增</el-button>
  <!--新增面板 dialogFormVisible为true则出现-->
  <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :rules="rules1" :model="form" ref="form1">
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goods_name">
              <el-input v-model="form.goods_name" autocomplete="off" :key="goods_name"></el-input>
          </el-form-item>
          <el-form-item label="供货商" :label-width="formLabelWidth" prop="supplier_id">
              <el-select v-model="form.supplier_id" placeholder="请选择供货商" clearable="false">
                  <el-option
                          v-for="item in option_Manufactor"
                          :key="item.supplier_id"
                          :label="item.supplier_name"
                          :value="item.supplier_id">
                  </el-option>
              </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <!--点击取消清空面板内容-->
          <el-button @click="empty()">取 消</el-button>
          <!--点击确定添加内容-->
          <el-button type="primary" @click="add()" >确 定</el-button>
      </div>
      </el-dialog>
      <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :options="options"
      selection-row
      index-row
      add-mode
      :rowHandle="rowHandle"
      @custom-emit-1="handleCustomEvent"
      @row-remove="handleRowRemove"
      @dialog-cancel="handleDialogCancel"
      @selection-change="handleSelectionChange"/>

script

import Vue from 'vue'
import D2Crud from '@d2-projects/d2-crud'
import request from '@/plugin/axios'
Vue.use(D2Crud)

export default {
  data() {
    return {
      option_Manufactor:[ ],
      data: [ ],
      form:{
	      goods_name:'',
	      supplier_id:'',
        },
      columns: [
        {
          title: '编号',
          key: 'goods_id',
          width: '180'
        },
        {
          title: '商品名称',
          key: 'goods_name',
          width: '180'
        },
        {
          title: '供货商',
          key: 'supplier_id',
          width: '180'
        }
       ],
        options: {
            border: true,
            size: 'small'
       },
        loading: true,
        loadingOptions: {
            text: '拼命加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 1)'
       },
      addButton: {
        icon: 'el-icon-plus',
        size: 'small'
       },
      rowHandle: {
        columnHeader: '编辑表格',
        custom: [
          {
              text: '编辑',
              type: 'success',
              icon: 'el-icon-edit',
              size: 'small',
              emit: 'custom-emit-1'
          }
        ],
        remove: {
          icon: 'el-icon-delete',
          size: 'small',
          fixed: 'right',
          confirm: true,
        }
      },
       rules1: {
            goods_name: [
                { required: true, message: '请填写商品名称', trigger: 'blur' }
            ],
            supplier_id: [
                { required: true, message: '请选择供货商', trigger: 'blur' }
            ],
        },
       dialogTableVisible: false,
       dialogFormVisible: false,
       dialogFormVisible_xiu: false,
       formLabelWidth: '120px'
    }
  },
  mounted () {
    request
      .get('请求商品地址')
      .then(response => {
        this.data = response.data
        console.log(this.data)
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
    request
      .get('请求供货商地址')
      .then(response => {
        this.option_changjia = response.data
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  },
  methods: {
    add: function () {
        this.$refs.form1.validate((valid) => {
            if (valid) {
                var data = this.data
                var form = this.form
                var notify = this.$notify
                var params = new URLSearchParams()
                params.append('goods_name', form.goods_name)
                params.append('supplier_id', form.supplier_id)
                request.post('请求商品增加地址',
                    params
                ).then(function (response) {
                    if (response.msg === '失败') {
                        notify({
                            title: '新增失败',
                            message: '新增失败!!',
                            type: 'warning',
                            duration: 6000
                        })
                    } else if (response.msg === '成功') {
                        data.push({
                            goods_id: response.goods_id,
                            goods_name: response.goods_name,
                            supplier_id: response.supplier_id,
                        })
                        notify({
                            title: '新增成功',
                            message: '新增成功!!',
                            type: 'success',
                            duration: 6000
                        })
                    }
                    console.log(response)
                })
                    .catch(function (error) {
                        console.log(error)
                    })
                this.dialogFormVisible = false
                this.$refs.form1.resetFields()
            } else {
                console.log('error submit!!')
                return false
            }
        })
    },
    empty: function(){
        this.dialogFormVisible = false
        this.$refs.form1.resetFields()
    },
  <!--修改面板 本例中没有添加-->
    handleCustomEvent ({index, row}) {
        this.dialogFormVisible_xiu = true
        this.form_xiu.goods_id= row.goods_id
    },
    handleRowAdd (row, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
        console.log(row)
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        done()
        this.formOptions.saveLoading = false
      }, 300);
    },
    handleRowEdit ({index, row}, done) {
      this.formOptions.saveLoading = true
      setTimeout(() => {
        console.log(index)
        console.log(row)
        this.$message({
          message: '编辑成功',
          type: 'success'
        })
        done()
        this.formOptions.saveLoading = false
      }, 300)
    },
     handleRowRemove: function ({ index, row }, done) {
          var notify = this.$notify
          var params = new URLSearchParams()
          params.append('wl_bianhao', row.wl_bianhao)
          request.put('请求商品删除',
              params
          ).then(function (response) {
              if (response.msg === '失败') {
                  notify({
                      title: '删除失败',
                      message: '删除失败!!',
                      type: 'warning',
                      duration: 6000
                  })
              } else if (response.msg === '成功') {
                  notify({
                      title: '删除成功',
                      message: '删除成功!!',
                      type: 'success',
                      duration: 6000
                  })
              }
              console.log(response)
          })
              .catch(function (error) {
                  console.log(error)
              })
          done()
      },
    handleDialogCancel (done) {
      this.$message({
        message: '取消保存',
        type: 'warning'
      });
      done()
    },
    handleSelectionChange (selection) {
      console.log(selection)
    }
  }
}

只做了增加的演示，修改的演示仿照增加进行copy就可以，删除调用组件原本的方法。
对于修改，可以修改数据库里的内容但是对于页面内容只有手动刷新之后才可以显示新的内容，我正在找多种方法解决。