basic-grid

Attributes

参数	说明	类型	可选值	默认值
clickExpandOption	表格点击展开配置，具体详情配置见下方`clickExpandOption`	object	-	-
isNeedSelectCheckBox	是否有选择框	boolean		true
gridTabName	自定义 grid 的 tab 的名字，当 gridTabName 没有定义，将使用功能名称+"列表"的形式作为 tab 的名字	string	-	-
formTabName	自定义 form 的 tab 的名字，当 formTabName 没有定义，将使用功能名称+"表单"的形式作为 tab 的名字	string	-	-
gridBtnOption	根据列的数据状态动态判断按钮权限，具体详情配置见下方`gridBtnOption`	object
isSingleSelect	是否是单选	boolean		false
isNeedSelectCheckBox	是否需要复选框，当`isSingleSelect`为`true`时，`isNeedSelectCheckBox`失效	boolean		true
disableRowEdit	禁用行编辑，默认值为 false，允许行编辑	boolean		false

clickExpandOption

参数	说明	类型	可选值	默认值
enable	是否开启点击展开行功能	boolean	-	-
expandComponent	点击展开的自定义组件(组件可通过`props`注册`row`属性，获取当前点击行数据)	string	-	-
rowKey	`rowKey`属性为行数据的主键	string	-	-

具体步骤

第一步：配置点击展开行自定义参数

第二步：注册点击展开后组件

vue

<template>
  <div>expand-component-demo:{{ row }}</div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "@vue/composition-api";
export default defineComponent({
  name: "expand-component-demo",
  props: {
    row: {},
  },
});
</script>

<style></style>

其中 row 为当前点击行的数据

至此点击展开行功能配置完成，效果如下：

自定义 gridTabName 例子

json

{ "gridTabName": "测试GridName" }

自定义 fromTabName 例子

json

{ "formTabName": "测试formName" }

自定义列的按钮权限

有时候我们需要根据表格的数据状态来动态决定当前行需要显示哪些操作按钮，例如在系统-审批流管理中就是按照当前审批任务的状态动态渲染操作按钮。

下面以配置审批流按钮为例，介绍如何配置，在功能设计开发器中添加如下配置

json

"gridBtnOption":{"enable": true,"columns": [{"column": "record_flag","formatter":"checkGridButtonFormatter"}],hiddenMenuBtn:true}

这里的enable代表开启自定义列按钮权限，columns是数组，因为可能存在多个列需要自定义列按钮权限的功能，所以这里用columns数组接收，数组中column代表自定义按钮权限要在哪一列显示，这里的值record_flag是操作列，checkGridButtonFormatter是根据业务场景自定义的Formatter函数，处理需要显示哪个按钮。系统会为Formatter参数提供当前行的数据和行按钮数据。

typescript

interface GridBtnOption {
  //是否开启列GridBtn功能
  enable: boolean;
  //是否关闭menu按钮  default 为 false
  hiddenMenuBtn?: boolean;
  //列的按钮项
  columns?: Array<ColumnGridBtn>;
}

export class ColumnGridBtn {
  //需要自定义的列
  column: string;
  formatter: string;
  constructor(column: string, formatter: string) {
    this.column = column;
    this.formatter = formatter;
  }
}

搜索配置

定义默认搜索时间范围

json

{ "type": "daterange", "startDefault": "-6month" }

type值为daterange是时间范围选择，startDefault为开始默认时间，另外如果要限制默认结束时间可以在endDefault中配置。上面的配置等价于下方配置

json

{ "type": "daterange", "startDefault": "-6month", "endDefault": "now" }

上面配置的意思是，开始时间是 6 个月前，截止时间是当前时间，如果没有配置endDefault，那么endDefault默认值为now，即当前时间

自定义搜索组件

在某些情况下，我们需要自定义组件来满足搜索场景。

场景

json

{   component: "avue-remote-tree-select",   url: "/api/vue/common/list?limit=10000&funId=2111622251654823937&offset=0",   multiple: false, clearable: true,   responseParser: function (res) {     return res.data.records || [];   },   props: {value: "group_id",label: "group_name",children: "children",disabled: "disabled",isLeaf: "isLeaf"}, filterEnable:true}