大数据表格组件pm-ag-grid3

pm-ag-grid3组件基于ag-grid-vue组件库二次封装，支持列表，树形列表两种形式展示表格数据

*props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | columnDefs | 表格列设计（详见columnDefs说明） | Array | 必须 | | | rowData | 表格数据 | Array | 非必须 | | | getRowId | 表格行标识 | String | 非必须 | 'id' | | getRowStyle | 动态设置行样式 | Function | 非必须 | | | rowHeight | 行高 | Number | 非必须 | 35 | | getRowHeight | 动态设置行高度 | Function | 非必须 | | | rowHoverHighLight | 鼠标移入行是否高亮 | Boolean | 非必须 | false | | headerHeight | 表头高度 | Number | 非必须 | 40 | | emptyTip | 数据为空时提示 | String | 非必须 | "暂无数据" | | loadingMessage | 加载中提示 | String | 非必须 | "加载中..." | | showConfig | 是否显示单元格列配置 | Boolean | 必须 | false | | rowSelection | 行选择 | Object | 非必须 | 详见补充说明 |
| defaultColDef | 列默认配置 | Object | 非必须 | 详见补充说明 | | animation | 是否关闭动画帧 | Boolean | 非必须 | | |expandLevel | 树形表格默认展开层级 | Number | 非必须 | 1 |

###defaultColDef属性说明 defaultColDef 是 ag-grid 中用于统一配置所有列默认属性的核心配置项，可减少 columnDefs 中的重复配置。以下是其常用参数的详细说明：

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------|-------------------------------------------|------------------|--------|-------------------------------------------------------| | resizable | 是否允许拖动调整列宽 | Boolean | - | true | | minWidth | 最小列宽（防止拖动时列宽过小，单位：px） | Number | 非必须 | -（不限制最小宽度，需手动设置具体数值如 80） | | maxWidth | 最大列宽（防止拖动时列宽过大，单位：px） | Number | 非必须 | -（不限制最大宽度，需手动设置具体数值如 300） | | flex | 自适应列宽比例（启用后会忽略 width 属性）| Number | 非必须 | -（示例：设置为 1 时，列宽按比例分配，适合响应式布局）| | editable | 是否允许单元格编辑 | Boolean | - | false | | cellStyle | 默认单元格样式（支持直接传样式对象，或返回样式对象的函数） | Object/Function | - |（示例：{ color: 'red', backgroundColor: '#ffffff', padding: '0 10px' }） |

defaultColDef补充说明

1. 优先级规则：columnDefs 中单独配置的属性会覆盖 defaultColDef 的默认配置（例如某列单独设置 resizable: false，会优先于 defaultColDef 的 resizable: true）。
2. 使用场景：建议将所有列共有的属性（如排序、筛选、基础样式）配置在 defaultColDef 中，仅在 columnDefs 中定义个性化属性（如 field、headerName）。

##rowSelection属性说明 | 属性 | 说明 | 类型 | 可选值 | | -------------------- | ------------------------------------------------------ | -------- | -------- | | mode | 列选模式 | String | singleRow/multiRow | | isRowSelectable | 列是否可选| Function | 示例：isRowSelectable: p => p.data.price > 30000 ? true : false | | hideDisabledCheckboxes | 不可选列选择框是否隐藏 | Boolean | false | ###columnDefs属性说明 | 属性 | 说明 | 类型 | 默认值 | | -------------------- | ------------------------------------------------------ | -------- | -------- | | headerName | 表头 | String | | | headerTooltip | 表头提示 | String | | | width | 列宽 | Number | | | minWidth | 最小列宽 | Number | | | maxWidth | 最大lie'kuan | Number | | | field | 字段名 | String | | | hide | 列隐藏 | Boolean | | | editable | 允许编辑 | Boolean | | | cellEditor | 编辑器类型（详见cellEditor补充说明） | Boolean | | | cellEditorParams | 编辑器参数（详见cellEditor补充说明） | Boolean | | | pinned | 固定列 | String | | | children | 表头分组 | Array | | | cellStyle | 动态设置单元格样式 | Function | | | cellRender（详见cellRender补充说明） | 自定义单元格内容 | Function | | | format | 常用单元格展示类型 使用方法参照下面format 配置使用方法说明|Object | | | valueGetter | 定义一个函数，动态计算单元格要显示的值，而非直接使用rowData中字段的原始值 | Function | | | valueFormatter |对单元格的 “原始值”（通过field或valueGetter获取的值）进行格式化后再显示| Function | | | valueSetter |当用户编辑单元格后，定义如何将编辑后的值设置到rowData中返回true表示设置成功，false表示失败 | Function | | | valueParser |用户编辑单元格后、valueSetter执行前，对输入值进行解析转换，返回解析后的值（供valueSetter或 Grid 内部使用|Function | | | resizable | 列宽是否可改变 | Boolean | true | |checkboxSelection|是否显示列复选框| Boolean | false | ###Table columns format 配置使用方法说明

{
      // 金额千分符展示
      format: {
        valueType: "amount",
        precision: 2, // 展示小数位数 （默认不展示)
		unit:'xxx', //单位（默认不显示）
        defaultValue: 0, // 没有数据时候显示的默认值 (默认为'')
      },
      // 数字百分比展示
      format: {
        valueType: "bfb",
        convert: false, // 是否是已经转换后的数据, 为false 时当前数值除以100进行展示 (默认为true)
        precision: 2, // 展示小数位数 （默认不展示)
        defaultValue: 0, // 没有数据时候显示的默认值 (默认为'')
      },
      // 日期格式展示
      format: {
        valueType: "date",
        show: "yyyy-MM"   // yyyy-MM-dd | yyyy | yyyy-MM | yyyy-MM-dd HH:mm:ss
        defaultValue: "0", // 没有数据时候显示的默认值 (默认为'')
      }

###cellEditor补充说明 cellEditor指定编辑器类型，提供6种编辑类型，分别是文本编辑器，长文本编辑器，选择器，数字类型编辑器，日期编辑器，以及选择框编辑器 示例：

columnDefs: [
    {
        cellEditor: 'agTextCellEditor', //文本编辑器
        cellEditorParams: {
            maxLength: 20 //限制输入文本长度
			}
    },
	{
        cellEditor: 'agLargeTextCellEditor', //长文本编辑器
        cellEditorPopup: true, //是否以弹框形式展示
        cellEditorParams: {
            maxLength: 100 //限制输入文本长度
			}
    },
	{
        cellEditor: 'agSelectCellEditor', //选择器
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'], //选项
			}
   	},
	{
        cellEditor: 'agDateCellEditor', .//日期类型编辑器（仅支持编辑yyyy-mm-dd格式的日期）
        cellEditorParams: {
            min: '2000-01-01',
            max: '2019-12-31',
        }
    }
]

###cellRender补充说明 使用场景：适用于需要定制单元格内容的场景， cellRender 支持返回一个html实现简单的 HTML 渲染（如链接、按钮等无交互逻辑的元素），使用较少，可通过valueGetter，valueFormatter替代），若需要渲染复杂的dom结构以及实现交互场景，则需要定制组件实现。 #####定制组件示例：

<template>
  <a :href="url" target="_blank" class="custom-link">
    {{ params.value }}
  </a>
</template>

<script>
export default {
  name: 'LinkRenderer',
  props: {
    params: Object // AG-Grid 会自动传入params
  },
  
  data() {
    return   {
        url:this.params.value
    }
  },

  beforeMount() {
  },
  methods: {
    // AG-Grid 要求的refresh方法
    refresh(params) {
        this.url = params.value
      return true; // 必须返回true表示渲染成功
    }
  }
}
</script>

<style scoped>
.custom-link {
  color: #42b983;
  text-decoration: none;
}
.new-badge {
  background: #ff4757;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.8em;
  margin-left: 5px;
}
</style>

Table events 表格事件

| 事件名称 | 说明 | 返回值 | | -------------------- | ----------------------------------------------------- | ----------------- | | gridReady | 表格初始化完成事件 | api | | cellEditingStarted | 单元格开始编辑事件 | param：当前可用数据 | | cellEditingStopped | 单元格结束编辑事件 | param: 当前可用数据 | | cellClicked | 单元格点击事件 | param: 当前可用数据 | | rowDoubleClicked | 单元格双击事件 | param: 当前可用数据 | | rowClicked | 行点击事件 | param: 当前可用数据 | | selectionChanged | 选中项发生变化时触发 | Object |

快捷 Api 事件

| 方法名 | 说明 | 参数 | | ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | showLoadingOverlay | 显示表格加载中状态 | - | | hideLoadingOverlay | 隐藏表格加载中状态 | - | | getSelectedRows | 获取选中行 | - | | sizeColumnsToFit | 设置列宽自适应 | - | | selectAll | 选中所有行 | - | | deselectAll | 取消选中所有行 | - | | setGridOption | 设置表格某一配置项 | 可参考agGridvue3官方文档 | | updateGridOption | 批量设置表格配置 | - | | getRowNode | 获取行节点对象（详见行节点api事件） | getRowId返回的行标识，默认是id | | applyTransaction | 插入、更新、删除数据 | - | |refreshCells({force:true}) | 强制刷新表格 | | | ###applyTransaction事件补充说明 applyTransaction事件支持批量插入、更新、删除数据，适合复杂场景（如需要触发网格事件或保持状态)

<script >
// 利用网格API插入数据
insertWithApi(){
  const newRow = { id: Date.now(), name: 'API插入用户', age: 22 };
  // 插入到指定位置（通过transaction指定insertIndex）
  this.gridApi.applyTransaction({
    add: [newRow],  // 要插入的数据数组
    addIndex: 1     // 插入位置的索引（这里插入到索引1）
  });
};

//利用网格API删除选中数据
 delSelectedRows  {
	//获取所有选中行
	const rows = gridApi.value.getSelectedRows()
      this.gridApi.applyTransaction({ remove: rows })
	  //若自定义了序号列，则需要通过refreshCells事件刷新表格更新每行对应的序号
	  //this.gridApi.refreshCells({force:true})
}
</script>

###getRowNode api事件补充 getRowNode 返回具有给定id的行节点。行节点id是你从回调getRowId(params)中提供的，如果没有提供，则id是当行数据被设置时由网格自动生成的一个数字（转换为字符串）。

| 方法名 | 说明 | 参数 | | ------ | ------ | ------- | | setData | 替换整行数据 |行数据 | | setDataValue | 更改行某个字段数据 | key,value | | setSelected | 设置行选中状态 | true/false | | setRowHeight | 设置行高 | Number |

##树形表格模式：

<template>
  <div style="width:1200px;margin:50px auto;height:500px">
    <pm-ag-grid3 ref="pmAgGrid3" style="width:100%;height:100%" :getRowStyle="getRowStyle"  :columnDefs="columnDefs" 
      @gridReady="onGridReady" @rowClicked="onRowClicked" :loading="loading" :showConfig="true" emptyTip="暂无数据" :expandLevel = "1"
       @cellEditingStarted="cellEditingStarted" @cellEditingStopped="onCellEditingStopped" :rowSelection="rowSelection" :animation="true"
        :headerHeight="60" @rowDoubleClicked=" onRowDoubleClicked" :defaultColDef="defaultColDef" @onSelect="onSelect"
      @selectionChanged="onSelectionChanged" loadingMessage="加载中..."></pm-ag-grid3>
  </div>
</template>

<script>
import { generateTreeData} from './generate.js'
export default {
  name: 'pmAgGrid3',
  data() {
    return {
      name: 'pmGrid',
      gridApi: null,
      rowData: [],
      loading:true,
      defaultColDef:{
        resizable:false,
      },
      columnDefs: [
        {
          type:'treeIndex',  //标识该列是树索引列
          field:'treeId',    //展示rowData数据中的某个字段，默认为treeId
          headerName: "序号",
          headerTooltip:"序号",
          width: 200,
          cellStyle:() => {return {'text-align':'center'}},
        },
        {
          headerName: '分组',
          headerTooltip:"序号",
          children: [
            {
              headerName: '模型&价格',  
              valueGetter: p => p.data.model + '-' + p.data.price,
              editable: false,
              width:100,
              cellEditor: 'agTextCellEditor',
              cellEditorParams: {
                maxLength: 20
              }
            },
          ]
        },
        {
          headerName: '网站',
          field: 'website',
          tooltipField:'website',
          cellRenderer:(params) => {
            const website = params.value
              return `<a href="${website}" target="_blank" style="color: #1385E2; text-decoration: underline;">
              ${website}访问链接
              </a>`;
          }
        },
        {
          headerName: '使用', field: "make", tooltipField:'make',
          filter: true,
          editable: true,
          width:120
        },
        {
          headerName: '模型', field: "model", editable: true, width:100,
        //   cellEditor: SelectEditor,
          cellEditorParams: {
            options: [{ label: 'Ford', value: 'Ford' }, { label: 'Tesla', value: 'Tesla' }, { label: 'Toyota', value: 'Toyota' }],
            //提示框间距
          },
          cellEditorPopup: false,
          width:80
        },
        {
          headerName: '价格', field: "price", width:100,
          //是否可编辑
          editable: p => p.data.price > 30000,
          valueFormatter: p => p.value + '元',
          render: (h) => { console.log('render', h) },
          valueParser: p => Number(p.newValue),

          cellEditor: 'agNumberCellEditor',
          cellEditorParams: {
            min: 30000,
            max: 1000000,
            showStepperButtons: true,
            step: 1,
            useFormatter: true,
          },
          filter: 'agTextColumnFilter',
        },
        {
          headerName: '日期',
          flex:1,
          field: 'date',
          // cellDataType:'dateString',
          editable: true,
        },
        { headerName: 'elec',field: "electric", width:100, editable: true,cellStyle:{display:'flex',justifyContent:'center'} }
      ],
      rowSelection: {
        mode: 'multiRow',
        // isRowSelectable: p => p.data.price > 30000 ? true : false,
        hideDisabledCheckboxes: true
      },
      quickFilterText: '',
    }
  },
  methods: {
    getRowStyle(params) {
      if (params.data.price < 30000) {
        return { color: 'red', textAlign: 'left' }
      }
      return null
    },
    onGridReady(params) {
      this.gridApi = params.api
      //treeData为模拟接口获取的树表格数据
      let treeData = generateTreeData()
      this.$refs.pmAgGrid3.setTreeData(treeData)
    }
  }
}
</script>

<style></style>