vxe-grid单元格渲染

最新推荐文章于 2025-09-10 02:33:28 发布

原创

最新推荐文章于 2025-09-10 02:33:28 发布 · 5.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

本文介绍了如何使用Vxe-Grid在Vue项目中实现单元格内容的自定义渲染。通过引入`RoleCell.vue`组件并注册自定义渲染器，实现了`Name`和`Role`列的内容替换，展示了如何在表格中展示复杂或定制化的内容，增强了表格的展示效果。

vxe-grid单元格渲染

有时候表格显示的内容不是我们需要的，这个时间可以使用单元格渲染，自定义显示的内容

单元格渲染的使用

在这里插入图片描述

// index.vue
<template>
  <div style="height: 400px">
    <vxe-grid ref="xGrid" v-bind="gridOptions"></vxe-grid>
  </div>
</template>
<script>
export default {
   
   
  data () {
   
   
    return {
   
   
      gridOptions: {
   
   
        highlightHoverRow: true,
        autoResize: true,
        height: 'auto',
        border: true,
        loading: false,
        columns: [
          {
   
    type: 'seq' },
          {
   
    field: 'name', title: 'Name' },
          {
   
    field: 'role', title: 'Role' },
          {
   
    field: 'sex', title: 'Sex' }
        ],
        data: []
      }