AgGridCustomCellEdit.vue

<!--
 * Ag Grid 自定义单元格编辑器
 * https://www.ag-grid.com/vue-data-grid/component-cell-editor/
 * AG-grid 自定义单元格
 * https://www.ag-grid.com/vue-data-grid/cell-rendering/
-->
<script setup lang="ts">
import { ref, reactive, onMounted, toRaw } from 'vue';
import { useQuasar } from 'quasar';
import { useMessage } from 'src/common/hooks';

import { AgGridVue } from 'ag-grid-vue3';
import { MyBtn, ComDialogTip } from 'src/components';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';
import DoubleNumberEdit from '../ag-grid-element/DoubleNumberEdit.vue';
import MyCellEditer from '../ag-grid-element/MyCellEditer.vue';
import ButtonCellRender from '../ag-grid-element/ButtonCellRender.vue';

import type { ColumnDefsType, ButtonCellRenderType } from 'src/common/types';

const $q = useQuasar();
const { info } = useMessage();

const defaultColDef = {
  resizable: true,
  flex: 1,
  suppressMenu: true, // 抑制标题行的菜单
  editable: true, // 可以编辑单元格
};

const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);

const columnDefs = reactive<Array<ColumnDefsType>>([
  {
    field: 'name',
    headerName: '姓名',
    cellEditor: MyCellEditer,
  },
  {
    field: 'value',
    headerName: '值',
    cellEditor: DoubleNumberEdit,
  },
  {
    headerName: '操作',
    minWidth: 200,
    pinned: 'right',
    editable: false,
    cellRenderer: ButtonCellRender,
    cellRendererParams: {
      buttons: [
        {
          hide: false,
          tooltip: '删除',
          color: 'grey-9',
          round: true,
          icon: 'bi-trash',
          flat: true,
          callback: (data: any) => {
            onDel(data);
          },
        },
      ],
      moreButtons: {
        hide: false,
        icon: 'bi-three-dots',
        color: 'grey-9',
        round: true,
        flat: true,
        children: [
          {
            hide: false,
            label: '复制',
            icon: 'bi-clipboard-check',
            color: 'light-green-6',
            callback: (data: any) => {
              onCopy(data);
            },
          },
          {
            label: '调试',
            icon: 'bi-bug',
            color: 'purple-3',
            callback: () => {
              info('调试');
            },
          },
          {
            label: '计划',
            icon: 'bi-clipboard-data',
            color: 'orange',
            callback: () => {
              info('计划');
            },
          },
        ],
      },
    } as ButtonCellRenderType,
  },
]);

const state = reactive({
  rowData: [] as any[],
});

onMounted(() => {
  getData();
});

// 点击单元格
function cellWasClicked(event: any) {
  return;
  console.log('cellWasClicked >>>>', event);
}

function onGridReady(params: any) {
  gridApi.value = params.api;
  gridColumnApi.value = params.columnApi;
}

function getData() {
  let arr = [
    { name: '张三', value: 18 },
    { name: '李四', value: 22 },
  ];
  state.rowData = arr;
}

function onView() {
  console.log('rowData', toRaw(state.rowData));
}

function onAdd() {
  state.rowData.push({ name: null, value: null });
  setTimeout(() => {
    gridApi.value.setRowData(state.rowData);
  }, 0);
}

function onDel(data: any) {
  $q.dialog({
    component: ComDialogTip,
    componentProps: {
      persistent: true,
      text: `确定删除当前列 ${data.data.name}`,
      color: 'negative',
    },
  }).onOk(() => {
    state.rowData.splice(data.rowIndex, 1);
    setTimeout(() => {
      gridApi.value.setRowData(state.rowData);
    }, 0);
  });
}

function onCopy(data: any) {
  state.rowData.push(data.data);
  setTimeout(() => {
    gridApi.value.setRowData(state.rowData);
  }, 0);
}
</script>
<template>
  <div>
    <div>
      <div class="text">
        <p>双击可编辑单元格</p>
        <p>
          在【值】这一列，输入值后面 + "="，执行(value = value *
          2)；（列如：输入:"20="，结果为:40）
        </p>
      </div>
      <div class="btns">
        <my-btn @click="onView" label="查看" />
        <my-btn @click="onAdd" label="添加" />
      </div>
    </div>
    <!-- 
      :suppressContextMenu="true" 阻止显示右键单击时的上下文菜单
      :suppressCellFocus="true" 阻止单元格聚焦
     -->
    <div class="ag-table">
      <ag-grid-vue
        style="height: 500px"
        class="ag-theme-alpine"
        :localeText="AG_GRID_LOCALE"
        :rowHeight="50"
        :headerHeight="54"
        rowClass="page9-ag-grid-element-my-edit-rowbox"
        :suppressContextMenu="true"
        :suppressCellFocus="true"
        :columnDefs="columnDefs"
        :rowData="state.rowData"
        :defaultColDef="defaultColDef"
        :animateRows="true"
        @cell-clicked="cellWasClicked"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.text {
  padding: 10px;
  padding-bottom: 0;
  p {
    margin-bottom: 6px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
}
.btns {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
}
:deep(.ag-table) {
  padding: 0 10px 10px 10px;
  .ag-cell-inline-editing {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
}
</style>
<style lang="scss">
.page9-ag-grid-element-my-edit-rowbox {
  display: flex;
  float: row;
  flex-wrap: nowrap;
  align-items: center;
  .ag-cell-not-inline-editing {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>