d2-projects / d2-crud Goto Github PK

D2 CRUD 模糊查询功能

功能是对表格字段能进行模糊查询，但是增加自定义文本框后会在标题和新增按钮外，布局实在太过奇葩|||，希望能嵌入模糊差查询文本框的位置

例：
d2-crud-table d2-crud-dialog d2-crud-pagination等，抽离后组件可单独引用，可一起引用（用d2-crud组件将这些子组件合并，通过传入的props来确定是否需要引入该组件）。
优点：

1. 降低代码耦合
2. 结构更加清晰
3. 起到一定的优化作用
4. *使用时更加灵活（例如某些不需要分页或者不需要新增的表格展示，独立调用分页器以实现自定义页面布局等）

抽离后header的slot视情况甚至都可以取消（没有仔细考虑这个）

找到vendors.app.js:254 发现是以下代码报错
{attrs:{disabled:e.handleRowHandleButtonDisabled(e.rowHandle.edit.disabled,n.$index,n.row)}

<template>
  <div>
    <d2-crud :data="dt" />
  </div>
</template>
<script>
...
methods: {
  someAsyncMethod() {
    this.dt.xx = xxx; // 此处修改无效
  }
}

外部方法更新了表单数据后，表单无法刷新页面显示。求更新变成动态传递

现在好像没法监听到change事件，自己用render函数写的下拉框，$emit去触发事件也触发不了

你好，请问当我提交表单请求后返回了相关信息，但是提交按钮状态变成了加载中的状态并且不能自动关闭，请问怎么回事呢，谢谢

    handleRowEdit ({index, row}, done) {
      this.formOptions.saveLoading = true
      edittask({
        "taskId":row["taskId"],
        "desc":row["desc"],
        "expression":row["expression"],
        "serviceName":row["serviceName"],
        "serviceVersion":row["serviceVersion"],
        "timeBefore":row["timeBefore"],
        "interval":row["interval"],
        "enable":row["enable"]
      }).then(res => {
        if (res.desc == "000000"){
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          done()
          this.reflush()
          window.close();
        }
      }, 300)
    }

另外，如果我想要禁用点击后的这个加载状态应该修改哪里呢，因为我期望能够提交失败后修改数据可以再次提交而不是需要刷新页面才能再次编辑，谢谢

我使用了封装的表单列表工具

<d2-crud
      ref="d2Crud"
      :columns="columns"
    >
</d2-crud>

export default {
  data () {
    return {
      columns: [
        {
          title: 'id',
          key: 'id',
          width: '50'
        },
        {
          title: 'test',
          key: 'test',
          width: '50',
          component: {
            name: MyTag
          }
        }
       ]
    }
}

MyTag：

<template>
  <div style="cursor: pointer">
    <el-tag :type="type" @click.native="handleClick" >{{ text }}</el-tag>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      require: true
    }
  },
  computed: {
    type () {
      return this.value=='1' ? 'success' : 'danger'
    },
    text () {
      return this.value=='1' ? '是' : '否'
    }
  },
  methods: {
    handleClick ({index, row}) {
      this.$emit('input', this.value=='1' ? '0' : '1')
    }
  }
}
</script>

在这里我的test使用了一个子组件，因为在这个子组件里面有一个点击事件，现在我想要在这个子组件里面能获取到父组件里面的这个id的值，请问应该怎么传递呢，使用props只获取到了 {{msg}} 类型的

请教一下， element-ui的树形控件的树形节点选择在d2-crud里面的表格和弹窗怎么实现父子通讯，谢谢大神

:rowHandle="rowHandle"
edit-title="修改"
:edit-template="editTemplate"

比如数据对象是如下格式{"name":"james", "info":{"id":1, "address":"xxxxx"}}
在编辑的时候我想修改一栏地址
editTemplate:
{
name: {
title: '名字',
value: ''
},
address: {
title: '地址',
value: ''
}
}

发现编辑是弹出的框中address拿不到对应的值，如何实现这个需求？

点击取消会提示：Uncaught (in promise) cancel

edit和remove都会...

el-input实际是有type属性的，比如想要使用textarea，只能自定义component

代码注释中说 暂不使用d2-column递归组件，有bug
commit 045ff15 中提到递归组件会有bug, 所以没再使用, 不知道具体是什么bug呢, 能否解决, 或者对于没有children, 不用递归的简单使用场景, 是不是不会造成太大影响呢?

这个功能还是挺常用的, 能不能考虑封装到组件里

当动态改变column字段顺序时，数据与column会对应不上。比如 初始设置 a1 a2 两个列，后来设置为 a3 a1 a2 三个列，结果a3 列显示为a1字段的值了。 而且点击排序也会出现问题。

RT~~

我想请问下pagination里的total使用data的length是出于什么考虑呢？如果后端接口请求的是分页数据，那分页组件就没法工作了。

不好意思，我是新手，请问如何导出excel或xls呢？ 有没有具体教程，谢谢

如题...

求大神支持给每一行可以添加一个可以点击展开的slot，用于传递自有的定制组件。
效果如：

最小化问题复现示例：https://github.com/FairyEver/crud-issue-26-demo

建议：

是否有办法给新增和编辑 dialog 组件指定所有 element 支持的 组件参数？

在表格列使用自定义组件的时候，行内编辑 ，比如点有效和无效的时候，用this.$emit('input',value)出来，
再用这个@d2-data-change="handleDataChange"拿到的是整个DATA，能不能再加个事件，是获取修改后的当前行的。

可能是我没找到吧，我现在希望能通过row["value"] 的值的结果判断修改当前行的样式，但是目前为止还没有找到可以使用的方式或可以操作的地方，希望能得到帮助，谢谢

<div class="item">
          <d2-crud
              ref="d2Crud"
              :columns="columns"
              :data="data"
              :options="options"
              :pagination = "pagination"
          />
</div>


export default{
  data () {
    return {
      flush : true,
      columns: [
       {
         title: 'id',
         key: 'Id',
         sortable: true,
         minWidth:35
        }
     ]
   }
}

例如在这里，当我的id获取的值是奇数的时候整行显示黄色，偶数则整行显示蓝色。
这个功能在element-ui中可以使用，但是这里的d2-curd经过了封装好像无法使用

使用 ICE 建立的项目没办法使用 slot="header" 给表头添加元素阿 - -

目前数据的适配不是很方便，如果可以传入filter对应的处理函数，可能会好用很多

rt

表格列自定义组件传入参数目前是否只能传入由key参数定义的属性，而不能传入row对应的对象？
如果可以的话应该怎么实现啊？

官方给出的下拉框中的数据如下所示，是写死在options当中
name: 'el-select',
options: [
{
value: '王小虎',
label: '王小虎'
},
{
value: '王中虎',
label: '王中虎'
},
{
value: '王老虎',
label: '王老虎'
}
]

请问，如何能将数据库中的内容动态显示到下拉框中？

🔩 功能开发 | d2-crud表格功能优化

建议参考AVUE的crud表格控件功能对表格中表单的功能进行优化，建议支持采用卡槽的形式来扩展表单的自定义组件。实际使用起来对比AVUE的表格控件，太繁琐！

不好意思新手的问题，试了好几个方法都不能，怎么才能隐藏 location 和 department的column

tableQtyColumns: [{
key: "Location",
title: "Location",
sortable: true,
width: 100,
hidden: true
},
{
key: "Department",
title: "Department",
sortable: true,
width: 120,
hidden: true
},
{
key: "User",
title: "User",
sortable: true,
width: 130
},
{
key: "GRNo",
title: "GR No.",
sortable: true,
},
{
key: "Qty",
title: "Qty",
sortable: true,
},

        {
            key: "Cost",
            title: "Cost",
            sortable: true,
        },

    ],

<div slot="footer"> <el-button :size="$d2CrudSize ? Object.assign({ saveButtonSize: $d2CrudSize}, formOptions) : null" :type="formOptions ? handleAttribute(formOptions.saveButtonType, null) : null" :icon="formOptions ? handleAttribute(formOptions.saveButtonIcon, null) : null" :loading="formOptions ? handleAttribute(formOptions.saveLoading, false) : false" @click="handleDialogSave" > 确 定 </el-button> </div>

这个确定能不能改成从外面自定义?

https://s2.ax1x.com/2019/06/05/VNXI8s.png
问一下，像这样的多级表头，数据要怎么处理呢

好像两个组件绑定的不是一个数据一样。
有没有什么方法可以刷新一下数据.
临时这样解决 😂

 this.showtable = false;
 setTimeout(() => {
    this.showtable = true;
}, 10);

比如加上url属性，就可以从这个地址加载数据，并且可以自动分页等等。
编辑可以选择用：表单编辑，行内编辑，或单元格编辑。等等。

建议可以参考 miniui 的 datagrid 组件，里面的api，和效果非常丰富。
http://www.miniui.com/docs/api/index.html#ui=datagrid
http://www.miniui.com/demo/index.html#src=datagrid/celledit.html

是否可以增加这个方法，当拖动表头改变了列的宽度的时候会触发该事件

'' cannot be keyed. Place the key on real elements instead 不要在template标签使用:key；d2-crud.vue中有些地方在template标签上使用了:key; 单独引入项目开启eslint会报错。

如题

this.tableData.forEach(item => {
if (item.check === 1) {
this.$refs.d2Crud.$refs.elTable.toggleRowSelection(item, true)
}
})
这段代码不能设置默认选中的项目，是在mounted里面调用的

如题，如何触发filter-change

this.$refs.d2Crud.addTemplate.属性名.title=‘名字’
this.addTemplate.属性名.title=‘名字’
这两种方法修改了title值，但是视图不能更新怎么处理呢？
如何手动修改模板的值？

同一个页面里存在add和edit的rules时，模态框里的表单验证会窜...

this.pagination.total = res.page.total
按例子写的，但是这样实际并无任何效果

请问在formtemplate内如何禁止input编辑，谢谢

新增数据是需要修改其中一项, 但是编辑的时候不能修改, 现在无法监听到新增按钮的点击去切换这个状态

表格内编辑在使用el-cascader控件时，无法填充下拉选项。

https://d2admin.fairyever.com/#/demo/d2-crud/demo20

目前是固定50%?

如
formOptions: {
Width: '90%'

报错消息
render: Cannot read property 'disabled' of undefined

简单场景： 创建用户， 需要 用户/密码/权限， 但是修改时候分开 密码和权限的修改，同时用户名无法修改。这需要add和edit template不同。

1. row-add 和 row-edit 对应弹出的dialog 是调用同一个template. 是否支持各自对应模板。
2. 是否增加 @before-row-add @before-row-edit 事件，在点击按钮弹出dialog前触发，这样可以动态修改dialog内容。
3. 表格内编辑，column使用components el-select等，修改后只触发了@d2-data-change, 强烈要求增加行级的修改触发，放入 @row-edit 是可以接受的，语义上是连贯的

以上这些我知道都可以custom组件自己来，但是既然提供了内置组件，我觉得加强下会便利很多。

点击确定按钮提交表单时, 不会检查数据是否修改吗, 好像没有任何改动直接点确定, 表单也提交了. 如果要加判断的话有没有什么思路呢? 望指点 谢谢