ag-grid-vue如何实现悬浮框、可拖拽、可编辑、动态合并等功能

1. 鼠标悬浮弹出完整信息

演示效果

第一种方法：在单个列中配置columnDefs的tooltipField属性

let columnDefs = [
    headerName: "样品编码",
    field: "sample_code",
    minWidth: 150,
    tooltipField: "sample_code",
]

第二种方法：全局配置tooltipValueGetter

const defaultColDef = {
  tooltipValueGetter: (params)=> {
    return params.value;
  }
};

```动态判断是否需要悬浮框``

if (params.colDef.field !== "test_result"&&params.colDef.field !== "item_test_result") {
      return params.value;
}

补充鼠标停留悬浮时间

tooltipShowDelay属性

<ag-grid-vue
      class="ag-theme-alpine"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :defaultColDef="defaultColDef"
      tooltipShowDelay="0"
    >
    </ag-grid-vue>

2. 配置ag-grid表格列的可拉伸与位置固定

const defaultColDef = {
  resizable: true,
  lockPosition: true,
};

3. 动态合并序号/显示内容

合并后序号值的计算

定义一个index,每次合并时index值加1，用于显示

cellRenderer: (params) => {
      let arr = [];
  for (let index = 0; index < params.node.rowIndex; index++) {
    if (!arr.includes(rowData.value[index].sample_code)) {
      arr.push(rowData.value[index].sample_code);
    }
  }
  return arr.length + 1;
    },

4. 单元格内设置可编辑输入框

1’ 自带双击编辑，需要配置editable属性

（1）在单个列配置中或者默认配置中设置editable为true

（2）动态配置，添加点击失焦事件

changeField属性用于判断双击的是哪一列

editable: (params) => {
      changeField.value = "item_test_result";
      return true;
}

ag-grid中配置单元格输入框失焦事件

@cellValueChanged="cellValueChanged"

const cellValueChanged = async (event) => {
  if (changeField.value === "test_result") {
    const data = {
      sample_uid: event.data.uid, //主数据
      result: event.value,
    };
    // 调用修改数据接口
    const res = await updateTestResult(data);
    if (res.code === "000000") {
      message.success("修改成功");
    }
  }
};

(3) 回车跳转下一行(英文版文档中有详解)

2’ 将双击单元格更改为单击

在单个列配置中或者默认配置中添加设置singleClickEdit 为true(editable需要保留)

3’ 使用自定义input输入框

列的配置

input聚焦时给当前input加上id，当失焦后调用接口，调用完后将设置的id再移除，这样就能够知道当前修改的是哪个input框了。
”outline:none"清除输入框默认聚焦样式

{
    headerName: "检测结论",
    field: "test_result",
    cellRenderer: (params) => {
      var input = document.createElement("input");
      input.setAttribute("type", "text");
     input.style =
          "border:1px solid #dee0e3;color:green;padding:4px 11px;font-size:12px;border-radius:4px;outline:none";
      input.value = params.value ? params.value : "";
      input.addEventListener("focus", (event) => {
        input.id = "test_result";
      });
      input.addEventListener("blur", async (event) => {
        let value = document.getElementById("test_result").value;
        // 接口调用
        const data = {
          sample_uid: active.value, //主数据
          result: value,
        };
        const res = await updateTestResult(data);
        if (res.code === "000000") {
          message.success("修改成功");
          input.id = "";
        }
      });
      const cell = document.createElement("div");
      cell.appendChild(input);
      return cell;
    },
  },

5. 选择框的应用

@selection-changed="onSelectionChanged" 当选中数组发生改变时

// select框发生改变时
const onSelectionChanged = (val) => {
  var selRows = gridApi.value.getSelectedRows();
  let arr = rowData.value.filter((item) => {
    return item.uid !== null;
  });
  // 用于合并单元格判断是否全选
  if (arr.length === selRows.length) {
    gridApi.value.selectAll();
  }
};

6. 行点击事件

@rowClicked="onRowClicked"

// 行点击事件
const onRowClicked = (params) => {
  active.value = params.node.data.uid;
  activeChildId.value = params.node.data.test_item_uid;
};

7. 设置数据全部渲染(默认渲染一屏的数据)

:suppressRowVirtualisation="true"