vxe-grid之数据单元格渲染器

vxe-grid

vxe-table 的一部分, 能通过配置方式, 渲染出表格

数据单元格渲染器

实现一个数据单元格渲染器

实现1个vue组件和1个渲染器注册器

MoenyFormatter.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { VxeGlobalRendererHandles } from 'vxe-pc-ui';
import { VxeTableDefines } from 'vxe-table';
import XEUtils from 'xe-utils';

const props = defineProps<{
    // 用于获取组件需要的自定义参数
    renderOpts: VxeGlobalRendererHandles.RenderTableDefaultOptions<any>
    // vxe-table会通过该props, 将 vxe-table 实例, column 等信息通过该props注入
    renderParams: VxeGlobalRendererHandles.RenderTableDefaultParams<any>
}>()

const currColumn = ref<VxeTableDefines.ColumnInfo>()
const currRow = ref()

const cellLabel = computed(() => {
  if (currRow.value && currColumn.value) {
    return XEUtils.commafy(XEUtils.toNumber(currRow.value[currColumn.value.field]))
  }
  return ''
})

const load = () => {
  const { renderParams } = props
  const { row, column } = renderParams
  currRow.value = row
  currColumn.value = column
}

load()
</script>

<template>
  <span>{{ cellLabel }}</span>
</template>

<style lang="scss" scoped></style>

MoenyFormatterRender.tsx

import { VxeUI } from 'vxe-pc-ui'
import MoenyFormatter from './MoenyFormatter.vue'

// 创建单元格金额格式化渲染器
VxeUI.renderer.add('MoenyFormatter', {
  // 金额右对齐
  tableCellAlign: 'right',
  // 默认显示模板
  renderTableDefault (renderOpts, renderParams) {
    return <MoenyFormatter renderOpts={ renderOpts } renderParams={ renderParams } />
  }
})

使用数据单元格渲染器

<script setup lang="ts">
import { ref } from 'vue';
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table';
// 注册自定义单元格渲染器
import './MoenyFormatterRender.tsx'

const data = ref([
    {
        id: 1,
        name: '张三',
        age: 18,
        sex: '男',
        money: 10000,
    },
    {
        id: 2,
        name: '李四',
        age: 20,
        sex: '女',
        money: 20000,
    },
])

const columns = ref<VxeGridPropTypes.Columns>([
    {
        title: 'ID',
        field: 'id',
    },
    {
        title: '姓名',
        field: 'name'
    },
    {
        title: '年龄',
        field: 'age',
        editRender: { name: 'EditNumber', props: { clearable: true } }
    },
    {
        title: '性别',
        field: 'sex',
    },
    {
        title: '压岁钱',
        field: 'money',
        cellRender: { name: 'MoenyFormatter' }
    },
])
</script>

<template>
    <div class="h-[300px]">
       <VxeGrid :data="data" :columns="columns"></VxeGrid>
    </div>
</template>

<style lang="scss" scoped></style>

数据单元格可编辑渲染器

实现一个数据单元格可编辑渲染器

实现2个vue组件(1个用于单元格可编辑时, 一个用于单元格处于普通状态时)和1个渲染器注册器

EditNumber.vue

<template>
  <el-input-number v-if="currRow && currColumn" v-model="currRow[currColumn.field]" :min="18" :max="65" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { VxeGlobalRendererHandles } from 'vxe-pc-ui';
import { VxeTableDefines } from 'vxe-table';

const props = defineProps<{
    // 用于获取组件需要的自定义参数
    renderOpts: VxeGlobalRendererHandles.RenderTableDefaultOptions<any>
    // vxe-table会通过该props, 将 vxe-table 实例, column 等信息通过该props注入
    renderParams: VxeGlobalRendererHandles.RenderTableDefaultParams<any>
}>()

const currColumn = ref<VxeTableDefines.ColumnInfo>()
const currRow = ref()

const load = () => {
  const { renderParams } = props
  const { row, column } = renderParams
  currRow.value = row
  currColumn.value = column
}

load()
</script>

EditNumberRender.tsx

import { VxeUI } from 'vxe-table'
import EditNumber from './EditNumber.vue'

// 注册一个数值输入渲染器
VxeUI.renderer.add('EditNumber', {
  // 如果是输入框类型，可以设置为激活自动聚焦 class
  tableAutoFocus: 'input',
  // 金额右对齐
  tableCellAlign: 'right',
  // 可编辑激活模板
  renderTableEdit (renderOpts, renderParams) {
    return <EditNumber render-params={ renderParams } />
  },
  // 可编辑显示模板
  renderTableCell (renderOpts, renderParams) {
    const { row, column } = renderParams
    return <span>{ row[column.field] }岁</span>
  }
})

使用数据单元格可编辑渲染器

<script setup lang="ts">
import { ref } from 'vue';
import JsonTableComm from './JsonTableComm.vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table';
// 注册自定义单元格渲染器
import './EditNumberRender.tsx'

const data = ref([
    {
        id: 1,
        name: '张三',
        age: 18,
        sex: '男',
    },
    {
        id: 2,
        name: '李四',
        age: 20,
        sex: '女',
    },
])

const columns = ref<VxeGridPropTypes.Columns>([
    {
        title: 'ID',
        field: 'id',
    },
    {
        title: '姓名',
        field: 'name'
    },
    {
        title: '年龄',
        field: 'age',
        editRender: { name: 'EditNumber', props: { clearable: true } }
    },
    {
        title: '性别',
        field: 'sex',
    },
])
</script>

<template>
    <div class="h-[300px]">
        <VxeGrid :data="data" :columns="columns"></VxeGrid>
    </div>
</template>

<style lang="scss" scoped></style>

参考资料

Vxe Table v4: 普通单元格渲染器

Vxe Table v4: 可编辑单元格渲染器