CpGrid 数据表格

对齐旧版 GeorGrid（311 个视图使用）的 GridSettings 契约：列配置沿用 dataField / title / width / format 字段名（format 返回 HTML 兼容），方法沿用 setData / getSelectData / insertRow 等旧命名，虚拟滚动内置（对齐旧版 VirtualList）。基于 vxe-table。

基础用法

基础用法

旧版列配置数组原样搬入即可。setData(data) 后自动选中第一行（旧版行为）；2000 行虚拟滚动；双击行触发 row-dblclick。

<template>
  <div class="demo-col">
    <div class="demo-row">
      <el-button @click="load">setData(2000 行)</el-button>
      <el-button @click="getSelect">getSelectData()</el-button>
      <el-button @click="insert">insertRow(置顶)</el-button>
      <el-button @click="remove">deleteRow(当前行)</el-button>
      <span class="demo-value">{{ msg }}</span>
    </div>
    <CpGrid
      ref="gridRef"
      :columns="columns"
      :height="300"
      @row-dblclick="(r) => (msg = `双击: ${r.OrderNo}`)"
      @row-select="(r) => (msg = `选中: ${r.OrderNo}`)"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import type { CpGridColumn } from "../../src/index";
import type CpGrid from "../../src/components/CpGrid.vue";

const gridRef = ref<InstanceType<typeof CpGrid>>();
const msg = ref("");

// 旧版 GridColumn 配置格式原样可用，format 返回 HTML
const columns: CpGridColumn[] = [
  { dataField: "OrderNo", title: "订单号", width: 140 },
  { dataField: "Port", title: "起运港", width: 100 },
  { dataField: "Qty", title: "箱量", width: 80, dataAlign: "right" },
  {
    dataField: "Amount",
    title: "金额",
    width: 120,
    dataAlign: "right",
    format: (val) => `<b style="color:#409eff">$${Number(val).toFixed(2)}</b>`,
  },
  {
    dataField: "Status",
    title: "状态",
    width: 90,
    dataAlign: "center",
    format: (val) =>
      val === 1
        ? '<span style="color:#67c23a">已放行</span>'
        : '<span style="color:#e6a23c">待审核</span>',
  },
  { dataField: "Remark", title: "备注" },
];

function makeRows(count: number) {
  const ports = ["CNSHA", "CNNGB", "CNSZX", "CNTAO", "USLAX"];
  return Array.from({ length: count }, (_, i) => ({
    OrderNo: `SO${202600000 + i}`,
    Port: ports[i % ports.length],
    Qty: (i % 8) + 1,
    Amount: 1000 + (i % 97) * 35.5,
    Status: i % 3 === 0 ? 1 : 0,
    Remark: `第 ${i + 1} 行 · 虚拟滚动`,
  }));
}

function load() {
  gridRef.value?.setData(makeRows(2000));
  msg.value = `共 ${gridRef.value?.data().length} 行`;
}
function getSelect() {
  const row = gridRef.value?.getSelectData();
  msg.value = row ? `getSelectData: ${row.OrderNo}` : "未选中";
}
function insert() {
  gridRef.value?.insertRow(
    {
      OrderNo: "SO-NEW",
      Port: "CNSHA",
      Qty: 1,
      Amount: 9999,
      Status: 0,
      Remark: "插入行",
    },
    0,
  );
  msg.value = "已插入 SO-NEW";
}
function remove() {
  gridRef.value?.deleteRow();
  msg.value = "已删除当前行";
}

onMounted(load);
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
columns *	—	CpGridColumn[]	必填
data	数据源；也可以完全通过 setData() 驱动（旧版习惯）	Record[]	—
multi-select	多选模式（对应旧版 mutilSel）	boolean	—
sortable	—	boolean	true
height	—	number | string	400
row-height	行高（对应旧版 rowHeight，默认 33）	number	33
show-row-index	显示序号列（对应旧版 rowHeadVisible）	boolean	true
row-header-width	—	number	48
fixed-columns	左侧固定列数（对应旧版 fixedColumns）	number	0
column-setting-key	列设置持久化 key：列顺序 / 宽度存入 localStorage，下次自动恢复	string	—

事件 Events

事件	说明	回调参数
@rowDblclick	行双击（对应旧版 rowDblClicked）	(Record)
@rowSelect	行选中（对应旧版 onRowSelected）	(Record)
@checkboxChange	多选变化（对应旧版 mutilSelRows）	(Array)
@columnChange	列设置面板调整列顺序 / 宽度后触发（可用于模板保存等）	(Array)

方法 Expose

方法（ref 调用）	说明
setData	—
data	—
getSelectData	—
getMutilSelectDatas	—
selectRow	—
updateRow	—
deleteRow	—
insertRow	—
refresh	—
openColumnSetting	—
getColumns	—
tableRef	底层 vxe-table 实例，高级用法直通

插槽 Slots

插槽	说明	作用域参数
[dataField]!	—	name